一、实现单行文本省略

1
2
3
4
5
6
7
8
9
10
/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */
.ellipsis {
  width: 400px;
  background-color: pink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p class="ellipsis">Lorem ipsum dolor sit amet, brute idque noster at nam. Et vix case.</p>

查看示例

二、多行文本省略

1. 使用line-clamp属性

1
2
3
4
5
6
7
8
9
10
11
/* 原理：设置特定的display，使用-webkit-line-clamp属性设置溢出的行数，溢出后隐藏 */
.ellipsis {
  width: 400px;
  background-color: pink;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<p class="ellipsis">Lorem ipsum dolor sit amet, brute idque noster at nam. Et vix case.Lorem ipsum dolor sit amet, brute idque noster at nam. Et vix case.</p>

line-clamp示例

该属性带有webkit前缀，多少肯定有些兼容问题。

image-20211112201944238