如何在多行 div 字段中用省略号截断文本？当 div 是单行时它起作用。我如何让它适用于多行，以便将省略号放在 div 右下角的最后？
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
#div2 {
/*white-space: nowrap; */
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
height: 3em;
}
</style>
</head>
<body>
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>
<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>
<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>
</body>
</html>最佳答案
这并没有变得太复杂。它似乎不支持跨浏览器。
.description {
height: 4.5em;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
#div2 {
/*white-space: nowrap; */
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
height: 3em;
}
#div3 {
width: 12em;
border: 1px solid #000000;
height: 3em;
line-height: 1em;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>
<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>
<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>
<p>This is the solution.</p>
<div id="div3">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>关于html - 如何使用 CSS 在多行 div 中用省略号截断文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47580648/