文本折行：单行折行、指定行数折行

1.单行折叠

2.

分析
display: -webkit-box;
开启 WebKit 内核浏览器（Chrome、Safari、新版 Edge 等）的旧版弹性盒模型。
这是实现「多行文本省略」的核心开关，只有开启这个，后面的 -webkit-line-clamp 才会生效。
注意：-webkit- 是浏览器私有前缀，代表这是 WebKit 引擎专属的特性，其他浏览器（如 Firefox）不支持
-webkit-box-orient: vertical;
设置弹性盒模型的排列方向为垂直方向。
让文本从上到下正常排列，形成我们熟悉的多行文本效果。
如果不写这行，文本会默认横向排列，就没法限制行数了。
-webkit-line-clamp: 2;
这是整个效果的核心属性：限制文本最多显示的行数。
这里的 2 表示：文本最多只显示 2 行，超出的部分会被隐藏。
把数字改成 3，就会变成 “最多显示 3 行”，以此类推。
这个属性必须配合 display: -webkit-box 一起使用，单独写是无效的。