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

效果图：

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

给你的 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 时生效。尽管这些带前缀的属性已被废弃，但这三个属性的相互依赖关系是一种完全规范化的行为，并将继续得到支持。

display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;