javascript - HTML 表 : Content with minus symbol breaks line in the column

Question

我面临以下问题:我有一个带有掩码的字段，并且在掩码的末尾有一个减号。例如:

61.927.297/0001-20

但是，当我去掉减号时，这当然是一个无效的掩码，表格的内容保持在同一行。下面是我所描述的图像:

即使数据大于图像上的数据，表格也会将其放在同一行，前提是掩码上没有“-”。

有人知道为什么会这样吗？我该怎么做才能使它出现在同一行上？

Answer 1

- 是你句子中的一个连字符(浏览器不知道内容是公式还是正文)，因此浏览器将其视为一个新的“词”。因为这行文本的长度对于表格单元格来说太长了，所以换行

您可以使用 CSS white-space使用 nowrap 将其设置为不换行的属性:

td {white-space:nowrap;}

比较下面两个相同表格的显示:

td {
  width:30px;
  border:1px solid #000;
}

#table2 td {
  width:30px;
  border:1px solid #000;
  white-space:nowrap;
}

<table>
  <tr>
    <td>hello-world</td>
    <td>hello- world</td>
    <td>hello - world</td>
    <td>helloworld</td>
  </tr>
</table>

<table id="table2">
  <tr>
    <td>hello-world</td>
    <td>hello- world</td>
    <td>hello - world</td>
    <td>helloworld</td>
  </tr>
</table>