如何组合 line-clamp 和 text-overflow:ellipsis？

Question

我如何（在 Chrome 中）将“超过 3 行的省略号”和“不适合一行的单词的省略号”与纯 CSS结合起来？

据我所知，-webkit-line-clamp需要display:-webkit-box，但这确实阻止text-overflow: ellipsis了生效。

---

在示例中，您应该看到两个椭圆。最后一行有一个省略号，因为整个文本较大，第二行有一个省略号，因为该单词无法容纳一行。但事实并非如此？我怎样才能实现这个目标？

http://jsfiddle.net/5nye9gLj/

p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    height:56px /* fallback */
}

<p>Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>

Answer 1

如果您知道字体的高度，我的技巧将是使用伪元素来伪造省略号。http://jsfiddle.net/syLk4ecx/

p {
  font-size: 16px;
  line-height: 20px;
  position: relative;
  max-width: 100px;
  max-height: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}

p::after {
  position: absolute;
  top: 49px;
  left: 0;
  content: '...';
}

<p>Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>

<p>Lorem ipsumnnnnnnnnnn dolor</p>

<p>Lorem dolor</p>

这会将底部省略号置于行距（两行之间的间距）中，通常只有 1 或 2 个像素高，但您可以使用 增加它line-height。这是脆弱的，设备之间字体渲染的差异可能会更大。此外，这取决于所呈现的语言。对于具有低下降部分和高上升部分的语言（和字体），这可能更难实现。http://jsfiddle.net/syLk4ecx/1/