固定高度的 CSS 自动换行/文本溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16960842/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 23:08:18 来源:igfitidea点击:
CSS word-wrap / text-overflow with fixed height
提问by PatrickB
i have the following example.
我有以下示例。
HTML:
HTML：
<div class="test">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
CSS:
CSS：
.test
{
display: block;
height: 299px;
left: 230px;
overflow: hidden;
text-overflow: ellipsis;
top: 110px;
white-space: pre-line;
width: 199px;
z-index: 1;
background-color: #FFFFFF;
border: 1px solid #777777;
position: absolute;
}
What i wish?
我想要什么？
Thank you in Advance!
先感谢您！
回答by Pete
text-overflow: ellipsisonly works on single line content as you need the line white-space:nowrapfor it to work.
text-overflow: ellipsis仅适用于单行内容，因为您需要该行white-space:nowrap才能使其工作。
Check this postfor some ideas for workarounds
查看这篇文章，了解一些解决方法的想法
