jsx проблема отображения номера телефона в одну строку

Question

У меня есть простая проблема, но я не мог найти решение для нее. У меня есть этот элемент

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

Я ожидаю, что он покажет одну строку строки, как это

Phone number :        +1 773-381-0000                     

, однако он отображает это

                      +1 
Phone number :        773-
                      381-
                      0000

Answer 1

Вы можете попробовать атрибут nowrap для правильного отображения.

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>

Ваша проблема в том, что в таблице и в тексте не хватает места.

Классы row и col bootstrap плохо работают с таблицами. Проверьте адаптивную таблицу здесь https://mdbootstrap.com/docs/jquery/tables/responsive/