文本溢出的处理

单行文本溢出显示省略号

1. 使用 white-space 属性来指定文本的处理方式，将其设置为 nowrap，表示不允许换行。
2. 使用 text-overflow 属性来指定溢出文本的处理方式，将其设置为 ellipsis，表示使用省略号来代替溢出的文本。
3. 为了让 text-overflow 属性生效，还需要将 overflow 属性设置为 hidden 或 clip。

综上，可以这样写：

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

效果演示

<div>我是一段很长的文字很长很长很长</div>

div {
  width:200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本溢出显示省略号

1. 使用 -webkit-line-clamp 来限制在一个块元素显示的文本的行数。

2. 使用 display: -webkit-box; 设置该盒子作为弹性伸缩盒子模型显示。

3. 使用 -webkit-box-orient 属性设置伸缩盒对象的子元素的排列方式。

4. 使用 text-overflow: ellipsis; 属性设置省略号来代替溢出的文本。

适用于 WebKit 浏览器或移动端 (绝大部分是 WebKit 内核的) 浏览器

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

效果演示

<div class="ellipsis">我是一段很长的文字很长很长很长，我不知道写什么了，我要一直写，一直写，一直写，让它变得超级长，超级长，超级长，超级长。</div>

.ellipsis {
  width:500px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}