第二行省略号 - CSS

在CSS中，第二行省略号（...）是一个CSS技巧，用于在文本溢出时截断文本并在末尾添加省略号。

语法

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• overflow属性用于隐藏文本的任何溢出部分。
• text-overflow属性用于指定文本溢出时应该发生什么。值ellipsis指定在末尾添加省略号。
• white-space属性用于指定如何处理文本内的空格。值nowrap指定在同一行上呈现所有文本，这对于实现截断文本并在其末尾放置省略号非常重要。

示例

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

<p class="truncate">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
</p>

效果如下：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen...

总结

使用第二行省略号可以很容易地将文本截断并在其末尾添加省略号，适用于各种CSS场景。