超出范围的文本自动截断且显示省略号

效果图：

如图所示，超出范围的文本自动截断了，而且显示省略号。

给你的 p 标签设置好宽高，然后加上下面这些代码即可优雅的做到上述效果。

特别提醒

这些代码必须一起出现才能生效，不能只使用其中一句或者几句。

为什么会出现 -webkit？有现代化的解决方案吗？

这种解决方案来自于旧版本的CSS 规范草案 (CSS Flexible Box Layout Module Level 1)。但是尽管是这样，依然是当前最推荐、最简单、兼容性最好的纯 CSS 方案。 你可以放心使用它，直到标准的 line-clamp 属性得到更广泛的支持。
MDN 官方有这样的说明：

为了兼容旧版本，供应商前缀的 -webkit-line-clamp 属性仅在与 display 属性设置为 -webkit-box 或 -webkit-inline-box 且 -webkit-box-orient 属性设置为 vertical 时生效。尽管这些带前缀的属性已被废弃，但这三个属性的相互依赖关系是一种完全规范化的行为，并将继续得到支持。

/* 让元素成为一个可以被“按行裁剪”的多行盒模型。 */
/* 必须这样设置，line-clamp 才能生效 */
display: -webkit-box;

overflow: hidden;

/* /ɪˈlɪpsɪs/ 仅当单行时有效 */
text-overflow: ellipsis;

/* 最多显示 2 行文本。 */
-webkit-line-clamp: 2;

/* 因为我们要按“行”进行垂直裁剪，必须指定 `vertical` */
-webkit-box-orient: vertical;