在一行中显示电话号码的jsx问题

Question

I have a simple problem, but I could not figure out the solution for it. I have this element

<tr className="list-group-item list-item row">
    <td className="col">Phone number :</td>
    <td className="col">{this.state.phone_number}{""}</td>
</tr>

I expect it to display one line row like this

Phone number :        +1 773-381-0000                     

however it displays this

                      +1 
Phone number :        773-
                      381-
                      0000

Answer 1

You can try the nowrap attribute to display properly.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_nowrap

<tr className="list-group-item list-item row">
       <td className="col">Phone number :</td>
       <td  style="white-space: nowrap;" className="col">{this.state.phone_number}{""}</td>
</tr>

Your problem is that there is not enough space in the table and the text wraps.

The row and col bootstrap classes don't work well with tables. Check responsive table here https://mdbootstrap.com/docs/jquery/tables/responsive/