Html 如何防止表格单元格中的文本换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/300220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent text in a table cell from wrapping
提问by pkaeding
Does anyone know how I can prevent the text in a table cell from wrapping? This is for the header of a table, and the heading is a lot longer than the data under it, but I need it to display on only one line. It is okay if the column is very wide.
有谁知道如何防止表格单元格中的文本换行？这是一个表的标题，标题比它下面的数据长很多，但我需要它只显示在一行上。如果列很宽也没关系。
The HTML of my (simplified) table looks like this:
我的（简化）表格的 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>
The heading itself is wrapped in a div inside the thtag for reasons pertaining to the javascript on the page.
th由于与页面上的 javascript 有关的原因，标题本身被包裹在标签内的 div 中。
The table is coming out with the headings wrapping onto multiple lines. This seems to only happen when the table is sufficiently wide, as the browser is trying to avoid horizontal scrolling. In my case, though, I want horizontal scrolling.
表格出来了，标题包裹在多行上。这似乎只有在表格足够宽时才会发生，因为浏览器试图避免水平滚动。不过，就我而言，我想要水平滚动。
Any ideas?
有任何想法吗？
回答by Owen
Have a look at the white-spaceproperty, used like this:
看看white-space属性，像这样使用：
th {
white-space: nowrap;
}
This will force the contents of <th>to display on one line.
这将强制将 的内容<th>显示在一行上。
From linked page, here are the various options for white-space:
从链接页面，这里有各种选项white-space：
normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
normal
此值指示用户代理折叠空白序列，并根据需要断开线条以填充行框。pre
此值可防止用户代理折叠空白序列。仅在保留的换行符处断行。nowrap
这个值像'normal'一样折叠空白，但抑制文本中的换行符。pre-wrap
这个值防止用户代理折叠空白序列。在保留的换行符处断行，并根据需要填充行框。pre-line
该值指示用户代理折叠空白序列。在保留的换行符处断行，并根据需要填充行框。
回答by Grant Wagner
<th nowrap="nowrap">
or
或者
<th style="white-space:nowrap;">
or
或者
<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>
回答by Sergey Golovchenko
There are at least two ways to do it:
至少有两种方法可以做到：
Use nowrap attribute inside the "td" tag:
在“td”标签内使用 nowrap 属性：
<th nowrap="nowrap">Really long column heading</th>
Use non-breakable spaces between your words:
在你的单词之间使用不可破坏的空格：
<th>Really long column heading</th>
回答by cssyphus
I came to this question needing to prevent text wrapping at the hyphen.
我遇到了这个问题，需要防止连字符处的文本换行。
This is how I did it:
我是这样做的：
<td><nobr>Table Text</nobr></td>
Reference:
参考：
回答by Davis Jones
For Use with React / Material UI
与 React / Material UI 一起使用
In case you're here wondering how this works for Material UI when building in React, here's how you add this to your <TableHead>Component:
如果您想知道在 React 中构建时 Material UI 是如何工作的，这里是您将它添加到<TableHead>组件的方法：
<TableHead style={{ whiteSpace: 'nowrap'}}>
