文本溢出隐藏显示省略号

一、单行文本溢出隐藏显示省略号

 text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

二、多行文本溢出隐藏显示省略号

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

1. text-overflow: -o-ellipsis-lastline;

这是 Opera 浏览器的私有属性，用于在最后一行文本溢出时显示省略号。不过这个属性现在已经不常用了，因为 Opera 已经转向使用 WebKit/Blink 引擎。

2. overflow: hidden;

设置内容溢出容器时隐藏超出部分。

3. text-overflow: ellipsis;

当单行文本溢出时显示省略号（…）。虽然这里设置了，但在多行文本情况下，这个属性需要结合其他属性才能生效。

4. display: -webkit-box;

使用旧的弹性盒模型（Flexbox 的前身），这是 WebKit 浏览器的私有属性。它允许元素按盒子模型布局。

5. -webkit-line-clamp: 2;

限制文本显示的行数（这里是 2 行）。超出指定行数的文本会被截断。

6. -webkit-box-orient: vertical;

设置盒子模型的方向为垂直方向，使文本按垂直方向排列。