如何在 CSS 中为 Webkit 浏览器创建多行省略号？

CSS 中带省略号的多行文本截断

需要压缩冗长的文本同时保持其可读性是网页设计中的常见挑战。 CSS 提供了 text-overflow 属性来用省略号截断文本，但这通常适用于单行场景。是否可以在文本的第二行应用省略号？

技术困境

在提供的示例中，所需的效果是省略号出现在第二行。但是，默认行为会截断第一行的文本，如提供的 HTML 标记所示：

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Webkit 浏览器的解决方案

而 CSS 则这样做由于本身不支持多行省略号，因此可以为基于 Webkit 的浏览器（例如 Safari 和 Chrome）提供解决方法。以下 CSS 代码片段实现了预期的效果：

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

实现

代码片段中的 CSS 属性协同工作如下：

• overflow: hide 防止文本溢出指定区域。
• text-overflow: ellipsis 激活省略号截断。
• display: -webkit-box 和 -webkit-line-clamp: 3 将可见文本行数限制为三。
• -webkit-box-orient: Vertical 垂直排列文本行。

浏览器兼容性

需要注意的是，该解决方案仅适用于 Webkit 浏览器。其他浏览器可能不支持这种方法。然而，它为指定上下文中的多行省略提供了可靠的方法。

以上是如何在 CSS 中为 Webkit 浏览器创建多行省略号？的详细内容。更多信息请关注PHP中文网其他相关文章！