文本溢出隐藏

overflow: hidden 能轻易地实现文本溢出溢出，我们重点讨论的是如何在文本隐藏的同时显示省略号。

首先我们要熟悉三个css属性：

• overflow：指定溢出元素的内容如何处理
• white-space：指定如何处理元素中的空白和换行符
• text-overflow：指定溢出文本如何处理

实现文本溢出显示省略号的关键是 text-overflow 属性，它的前提条件是文本真的有溢出。

默认情况下文本会自动换行，甚至溢出盒子，这时候是看得见的，通过设置 overflow: hidden 可以隐藏溢出的文本。 如果不想要换行，又得设置 white-space: nowrap。 最后，通过设置 text-overflow: ellipsis 来显示省略号。

单行文本溢出隐藏

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

效果如下：

这是一段很长的文本，我要让它溢出隐藏

这是一段很长的文本，我要让它溢出隐藏

多行文本溢出隐藏

当盒子的 display 设置为 -webkit-box 并且 -webkit-box-orient 设置为 vertical 时，可以使用 -webkit-line-clamp 属性来限制文本的行数。

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

效果如下：

这是一段很长的文本，我要让它溢出隐藏

参考

• MDN - text-overflow
• MDN - white-space
• MDN - overflow
• MDN - -webkit-line-clamp