在一行中顯示電話號碼的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/