Question

有谁知道如何防止表格单元格中的文字被包装？这是一个表的标题，标题比它下面的数据长很多，但我需要它只显示一行。如果色谱柱很宽，也没关系。

我的（简化）表格的HTML如下所示：

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

标题本身包含在th标记内的div中，原因与页面上的javascript有关。

桌子出来时标题包裹在多行上。这似乎只发生在表足够宽时，因为浏览器试图避免水平滚动。但就我而言，我想要水平滚动。

有什么想法吗？

Answer 1

查看white-space属性，使用如下：

th {
    white-space: nowrap;
}

这会强制<th>的内容显示在一行上。

从链接页面，以下是white-space的各种选项：

<强>正常
  此值指示用户代理折叠空白序列，并根据需要断行以填充行框。

<强>预
  此值可防止用户代理折叠空白序列。线条仅在保留的换行符处断开。

<强> NOWRAP
  此值会折叠空白区域，而不是“正常”，但会抑制文本中的换行符。

<强>预包装
  此值可防止用户代理折叠空白序列。在保留的换行符处打破行，并根据需要填充行框。

<强>预线
  此值指示用户代理折叠空白序列。在保留的换行符处打破行，并根据需要填充行框。

Answer 2

<th nowrap="nowrap">

或

<th style="white-space:nowrap;">

或

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

Answer 3

至少有两种方法可以做到：

在“td”标记内使用nowrap属性：

<th nowrap="nowrap">Really long column heading</th>

在您的字词之间使用不可分隔的空格：

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

Answer 4

我遇到了这个问题，需要阻止连字符的文本换行。

我就这样做了：

<td><nobr>Table Text</nobr></td>

参考：

How to prevent line break at hyphens on all browsers

Answer 5

用于React / Material UI

如果您在这里想知道在React中构建时它如何用于Material UI，以下是将其添加到<TableHead>组件中的方法：

<TableHead style={{ whiteSpace: 'nowrap'}}>

如何防止表格单元格中的文本换行

5 个答案:

用于React / Material UI