Html 如何阻止文本占用超过 1 行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/572298/
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 stop text from taking up more than 1 line?
提问by cletus
Is there a word-wrap or any other attribute that stops text from wrapping? I have a height, and overflow:hidden, and the text still breaks.
是否有自动换行或任何其他属性阻止文本换行？我有一个高度，和overflow:hidden，文本仍然中断。
Needs to work in all browsers, before CSS3.
需要在所有浏览器中工作，在 CSS3 之前。
回答by cletus
div {
white-space: nowrap;
overflow: hidden;
}<div>test that doesn't wrap</div>Note:this only works on block elements. If you need to do this to table cells (for example) you need to put a div inside the table cell as table cells have display table-cell not block.
注意：这只适用于块元素。如果您需要对表格单元格执行此操作（例如），您需要在表格单元格内放置一个 div，因为表格单元格具有显示表格单元格而不是阻止。
As of CSS3, this is supported for table cells as well.
从 CSS3 开始，这也支持表格单元格。
回答by Robert C. Barth
You can use CSS white-space Propertyto achieve this.
您可以使用它CSS white-space Property来实现这一点。
white-space: nowrap
回答by Vivek
Using ellipsis will add the ... at the last.
使用省略号会在最后添加 ...。
<style type="text/css">
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
回答by grossvogel
Sometimes using instead of spaces will work. Clearly it has drawbacks, though.
有时使用 代替空格会起作用。不过，显然它有缺点。
回答by Duncan Jones
Just to be crystal clear, this works nicely with paragraphs and headers etc. You just need to specify display: block.
为了清楚起见，这对段落和标题等很有效。您只需要指定display: block.
For instance:
例如：
<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
This is a really long title, but it won't exceed the parent width
</h5>
(forgive the inline styles)
（原谅内联样式）
