单/多文本溢出省略

一、单行文本溢出省略

.text {
  width: 200px;
  text-overflow: ellipsis; /* 溢出部分展示省略号，设置下两个后此属性才生效 */
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 单行展示，不换行 */
  border: 1px solid yellowgreen;
}
1
2
3
4
5
6
7

二、多行文本溢出省略

2.1.基于高度截断

.text2 {
  height: 40px;
  line-height: 20px;
  position: relative; /* 子绝父相 */
  overflow: hidden; /* 超出部分隐藏 */

  border: 1px solid yellowgreen;
}
.text2::after {
  content: '查看更多';
  position: absolute; /* 子绝父相 */
  bottom: 0; /* 定位到右下角 */
  right: 0;
  padding: 0 10px 0 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.2.基于行数截断

.text3 {
  width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box; /* 将此元素作为弹性伸缩盒模型展示 */
  -webkit-line-clamp: 2; /* 块级元素显示文本行数 */
  -webkit-box-orient: vertical; /* 设置或检索弹性伸缩盒子对象子元素的排列方式 */
  word-break: break-all; /* 文本存在英文单词时进行换行拆分 */
  border: 1px solid yellowgreen;
}
1
2
3
4
5
6
7
8
9
10