在 div 内仅用两行包裹文本

Question

我想在特定宽度的 div 内仅两行内包装文本。如果文本超出两行的长度，那么我想显示省略号。有没有办法使用 CSS 来做到这一点？

例如

Sample text showing wrapping
of text in only two line...

原文由 Mady 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果设置元素的 line-height 和 height 并设置 overflow:hidden; :54– 则可以使用 CSS 将输出限制为两行文本

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle 演示 —

或者，您可以使用 CSS text-overflow 和 white-space 属性来添加省略号，但这似乎只适用于单行。

 #someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

和一个演示：

--- jsFiddle 演示 —

实现多行文本和省略号似乎是 javascript 的领域。

原文由 jackwanders 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一个简单快捷的解决方案

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

对原始问题和答案的引用在 这里

原文由 vinesh 发布，翻译遵循 CC BY-SA 3.0 许可协议