CSS中如何用省略号实现多行文本溢出？

带省略号的多行文本溢出

在 CSS 中，text-overflow 属性允许在超出指定区域时截断文本。但是，默认情况下，此截断发生在单行上。有时，希望允许文本在多行上换行，同时仍然表明还有更多内容可以看到。

使用省略号实现多行溢出

要实现此效果，我们可以利用以下CSS属性：

• 显示： -webkit-box;：该属性创建一个可以容纳多行的灵活容器。
• -webkit-line-clamp: 3;：表示允许的最大行数在省略号出现之前（例如，对于三行设置为 3
• -webkit-box-orient: 垂直;: 确保行在容器内垂直堆叠。
• overflow: 隐藏; ：隐藏溢出容器边界的任何文本。
• text-overflow： ellipsis;：在最后一个可见行的末尾添加省略号 (...)。

用法示例

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

与这些属性到位后，

中的文本就可以了。元素将根据需要换行多行。但是，如果文本超出第三行的可用空间，则会被截断，并且末尾会出现省略号。

注意： 这些属性仅受基于 WebKit 的支持浏览器，包括 Chrome 和 Safari。其他浏览器可能需要替代解决方案。

以上是CSS中如何用省略号实现多行文本溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！