CSS：将元素限制为 1 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1318108/
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
CSS: limit element to 1 line
提问by Jourkey
I want to limit a element to display only 1 line of text, with the remainder hidden (overflow:hidden), without setting a specific height. Is this possible with just CSS?
我想限制一个元素只显示 1 行文本，其余部分隐藏（溢出：隐藏），而不设置特定高度。这可能只用 CSS 吗？
回答by
It is possible:
有可能的：
element (white-space: nowrap; overflow: scroll;)
Text parsed as HTML or XML is tokenized, which means all runs of whitespace are collapsed to a single space character. This means you will have a single line of text unless you specify something in addition to the overflow declaration that could cause your text to wrap.
解析为 HTML 或 XML 的文本被标记化，这意味着所有空格都被折叠为单个空格字符。这意味着您将只有一行文本，除非您指定了可能导致文本换行的溢出声明之外的其他内容。
EDIT: I failed to include the necessary write-space: nowrap property, otherwise the default is that a container will scroll vertically opposed to horizontally.
编辑：我没有包含必要的 write-space: nowrap 属性，否则默认情况下容器将垂直滚动而不是水平滚动。
回答by meder omuraliev
p#foo {
white-space:nowrap;
overflow:hidden;
}
回答by Alok
use display block so it won't go beyond your parent element.
使用显示块，这样它就不会超出您的父元素。
p#foo{
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
回答by strager
If you are looking to disable text wrapping, use white-space: nowrap;.
如果您要禁用文本换行，请使用white-space: nowrap;.
