CSS 如何在 div 元素中隐藏太长的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7612125/
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 hide too long texts in div elements?
提问by clarkk
How can you hide the overflow in a div?
如何隐藏 div 中的溢出？
Here the text just wraps down to a new line if the text is longer than the div
如果文本比 div 长，这里的文本只是换行到一个新行
<div style="width:50px; border:1px solid black; overflow-y:hidden">
test test test test
</div>
回答by DarthJDG
If you only want to show a single line of text in a fixed width div, give white-space:nowrapa go. Together with overflow:hiddenit will force your browser not to break the line and crop the view to your forced width.
如果您只想在固定宽度的 div 中显示一行文本，white-space:nowrap请试一试。与overflow:hidden它一起将强制您的浏览器不要断线并将视图裁剪为您的强制宽度。
You might also add text-overflow:ellipsisto avoid cutting words and letters in half, it adds a nice ...to the end to show you there's some bits missing. I'm not sure about the browser support though, and I've never tried this one.
您还可以添加text-overflow:ellipsis以避免将单词和字母切成两半，它会...在结尾添加一个很好的内容，以表明您缺少一些位。不过我不确定浏览器支持，我从来没有尝试过这个。
回答by jhunlio
The CSS property text-overflow: ellipsismaybe can help you out with that problem.
CSS 属性text-overflow: ellipsis也许可以帮助您解决这个问题。
Consider this HTML below:
考虑下面的这个 HTML：
<div id="truncateLongTexts">
test test test test
</div>
#truncateLongTexts {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis // This is where the magic happens
}
回答by kapa
You should specify a heightfor your div, overflow: hidden;can only hide the vertically overflowing content if there is some kind of defined height.
您应该height为您的 div指定一个，overflow: hidden;如果有某种定义的高度，则只能隐藏垂直溢出的内容。
In other words:
换句话说：
Here the text just wraps down to a new line if the text is longer than the div
如果文本比 div 长，这里的文本只是换行到一个新行
But how long is that div actually?
但那个 div 实际上有多长？
Please check out my jsFiddle demonstrationthat illustrates the difference.
请查看我的 jsFiddle 演示来说明差异。
回答by Alistair Laing
try overflow:none;
尝试溢出：无；
you didn't mention if you want scrollbars or not.
你没有提到你是否想要滚动条。
EDIT:
编辑：
Sorry I meant overflow:hidden.
对不起，我的意思是溢出：隐藏。
