css文本溢出省略号多行单行例子详细
在 CSS 中，可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况，对于多行文本溢出的情况，需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法。
单行文本溢出省略号
HTML 代码：
<p class="single-line-ellipsis">这是一个超长的单行文本，用于测试省略号效果。
</p>
CSS 代码：
.single-line-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
解释：
overflow: hidden;表示超出部分不可见。text-overflow: ellipsis;表示文本溢出时显示省略号。white-space: nowrap;表示文本不换行，这样才能实现完整的溢出效果。
多行文本溢出省略号
实现多行文本省略号的方法有很多种，这里介绍其中一种方法。该方法需要使用 -webkit-line-clamp 属性（该属性只对 WebKit 浏览器有效）和 -webkit-box-orient 属性。
HTML 代码：
<p class="multi-line-ellipsis">这是一个超长的多行文本，用于测试省略号效果。这是一个超长的多行文本，用于测试省略号效果。这是一个超长的多行文本，用于测试省略号效果。
</p>
CSS 代码：
.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}
解释：
display: -webkit-box;表示将文本框设置为弹性盒子，可以参考 flexbox 的相关知识。-webkit-box-orient: vertical;表示弹性盒子的排列方向为垂直方向。-webkit-line-clamp: 3;表示最多显示 3 行，超出部分会被省略号代替。overflow: hidden;表示超出部分不可见。text-overflow: ellipsis;表示文本溢出时显示省略号。
注意事项：
-webkit-line-clamp属性只对 WebKit 浏览器有效，对其他浏览器没有作用。- 弹性盒子的相关知识可以参考 flexbox。