css：文字超长后显示为 "..."

给定宽度（即块级元素）的标签，内容过多时会自动换行显示

内容过多时自动换行

怎样才能单行显示呢？
在标签上添加以下代码即可解决：

white-space: nowrap;

没有换行，但是给定宽度的文字超长后溢出

单行文本中，给定宽度的文字超长后会溢出
在标签上添加以下代码即可解决：

overflow: hidden;
text-overflow: ellipsis;

此时，需要显示单行内容的标签中超出的文字就会显示成 “...” 了。

单行文字超长后显示成 ...

弊端：只能显示单行文字。

---

#思考：如果需求是显示多行文字呢？文字过多怎么办？

在标签上添加以下代码即可解决：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*下面三条缺一不可 可以生成 '...' 主要针对谷歌浏览器 */
-webkit-line-clamp: 2;//表示行数
-webkit-box-orient: vertical;//表示纵向

此时，指定行数后的多余文字就替换成“...” 了。

第二行文字后都替换成 ... 了 ؏؏☝ᖗ乛◡乛ᖘ☝؏؏