时间戳

首页 > 解决方案 > jsx问题在一行中显示电话号码

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

问题描述

我有一个简单的问题，但我无法找出解决方案。我有这个元素

<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

标签： javascriptreactjsjsx

解决方案

您可以尝试该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不适用于表。在此处检查响应表https://mdbootstrap.com/docs/jquery/tables/responsive/

推荐阅读