第二行的css省略号

Question

CSS text-overflow: ellipsis 在第二行，这可能吗？我在网上找不到它。

例子：

我想要的是这样的：

 I hope someone could help me. I need
an ellipsis on the second line of...

但发生的事情是这样的：

 I hope someone could help me. I ...

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

Answer 1

A requirement for text-overflow: ellipsis; to work is a one-line version of white-space ( pre , nowrap etc).这意味着文本永远不会到达第二行。

因此。在纯 CSS 中不可能。

我刚才在寻找完全相同的东西时的来源： http ://www.quirksmode.org/css/textoverflow.html（Quirksmode ftw！）

编辑 如果优秀的 CSS 神将实现 http://www.w3.org/TR/css-overflow-3/#max-lines 我们可以在纯 CSS 中使用 fragments （新）和 max-lines （新）。还有一些关于 http://css-tricks.com/line-clampin/ 的更多信息

编辑 2 WebKit/Blink 有 line-clamp : -webkit-line-clamp: 2 将省略号放在第二行。

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

Answer 2

这应该 在 webkit 浏览器中 工作：

 overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持

 div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

* { font-family: verdana; }

 <div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

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