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

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>

由于页面上的Javascript原因，标题本身被包含在th标签内的

中。

当表格足够宽时，表头会换行成多行。这似乎只会在浏览器试图避免水平滚动时发生。但在我的情况下，我希望出现水平滚动。

有任何想法吗？

- pkaeding

Answer 1

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

th {
    white-space: nowrap;
}

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

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

normal
该值指示用户代理折叠空格序列，并在必要时断开线路以填充行框。

pre
该值防止用户代理折叠空格序列。只有保留的换行符才会断行。

nowrap
该值像“normal”一样折叠空格，但在文本内不允许换行。

pre-wrap
该值防止用户代理折叠空格序列。行在保留的换行符处断开，并在必要时填充行框。

pre-line
该值指示用户代理折叠空格序列。行在保留的换行符处断开，并在必要时填充行框。

- Owen

---

输入框和按钮在同一个单元格中无法正常工作，会随机放置在下面。 - IAmGroot

为了使这个工作正常，Table元素必须具有table-layout：fixed；属性。 - daniloquio

@Doomsknight，你找到在同一单元格中使用输入字段和另一个元素实现它的方法了吗？ - loveNoHate

white-space: pre; 是我所需的，因为 -28.04 在 - 和 28.04 之间换行。 - Brent

@Doomsknight 我之前也遇到了一个复选框的问题，通过更新CSS代码中的 input { display: inline; } 解决了它。 - Programster

它会弄乱其他单元格，需要进一步修复，我认为这是不完整的解决方案，因为一些其他单元格开始覆盖。 - sairfan

Answer 2

<th nowrap="nowrap">

或者

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

或者

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

- Grant Wagner

---

请注意，nowrap已被弃用。https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6。请改用样式表。 - wisbucky

注意：如果不小心使用，此属性可能导致单元格过宽。 - ArifMustafa

如何使用样式表？ - rogerdpack

@rogerdpack 我认为他们可能是指使用 style 属性设置 white-space 为 nowrap，你可以通过在行内设置属性、在 html 中定义样式表或在外部文档中定义样式来使用样式表，如本文所述：https://www.w3schools.com/html/html_css.asp。 - Dispensable Joe

@rogerdpack: @wisbucky所说的只适用于第一个例子。nowrap 属性已被弃用，你应该使用css（或样式）whitespace: nowrap代替。 - undefined

Answer 3

至少有两种方法可以实现：

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

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

使用非断行空格来连接你的单词：

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

- Sergey Golovchenko

---

请注意，nowrap已被弃用。https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6。请改用样式表。 - wisbucky

Answer 4

我来到这个问题，需要防止在连字符处换行。

这是我做的方法：

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

参考：

如何在所有浏览器中防止连字符断行

https://caniuse.com/?search=nobr

- cssyphus

---

值得注意的是，正如在这个答案链接(https://dev59.com/hWoy5IYBdhLWcg3wJKkq#8755071)中指出的那样，`nobr`标签是非标准的。 - pkaeding

非常正确。我已经阅读了所有这些评论，注意到了相应评论者的经验，并做出了判断。连字符有点棘手。（注意：您在评论中链接的问题与我在答案中链接的问题是同一个问题） - cssyphus

是的，这本来就是同一个问题。我只是想确保这个警告在此被发布，以防未来有人找到这个答案，却不愿意阅读链接的参考资料。 - pkaeding

哇 - 奇怪的问题；谢谢 - 我也遇到了一个日期在连字符后断行的问题。 - velkoon

Answer 5

适用于React / Material UI

如果您正在使用React构建Material UI时想知道如何使用此功能，以下是将其添加到您的<TableHead>组件的方法：

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

- Davis Jones