[分享]css两行加省略号

CSS可以通过text-overflow和white-space两个属性实现两行加省略号的效果。

/* 先定义一个样式为ellipsis的类 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 在需要应用该效果的元素上添加该类 */
<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  accusantium doloremque laudantium, totam rem aperiam.
</div> 

其中，text-overflow属性用于定义当文本溢出容器时如何显示，可以有以下三个值：

• clip：默认值，超出部分将被剪切掉。
• ellipsis：超出部分将用省略号代替。
• string：超出部分将用指定字符串代替。

white-space属性用于定义元素内部空白的处理方式，可以有以下几个值：

• normal：默认值，合并所有空白符，换行符被视为普通空格。
• nowrap：不允许换行。
• pre：保留所有空白符，包括换行符。
• pre-wrap：保留所有空白符，但允许换行。
• pre-line：合并多个空格、换行符等为单个空格，只保留换行的单个空格。

通过设置这两个属性，我们可以轻松实现两行加省略号的效果。