css文本溢出省略号多行单行例子详细

在 CSS 中，可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况，对于多行文本溢出的情况，需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法。

单行文本溢出省略号

HTML 代码：

<p class="single-line-ellipsis">这是一个超长的单行文本，用于测试省略号效果。
</p>

CSS 代码：

.single-line-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

解释：

1. overflow: hidden; 表示超出部分不可见。
2. text-overflow: ellipsis; 表示文本溢出时显示省略号。
3. 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;
}

解释：

1. display: -webkit-box; 表示将文本框设置为弹性盒子，可以参考 flexbox 的相关知识。
2. -webkit-box-orient: vertical; 表示弹性盒子的排列方向为垂直方向。
3. -webkit-line-clamp: 3; 表示最多显示 3 行，超出部分会被省略号代替。
4. overflow: hidden; 表示超出部分不可见。
5. text-overflow: ellipsis; 表示文本溢出时显示省略号。

注意事项：

1. -webkit-line-clamp 属性只对 WebKit 浏览器有效，对其他浏览器没有作用。
2. 弹性盒子的相关知识可以参考 flexbox。