文本溢出省略号 CSS

在开发 Web 页面时，常常会遇到一些文本内容过长的情况，如果不做处理会导致页面布局混乱。为了解决这个问题，我们可以使用 CSS 的 text-overflow 属性，它可以让超长的文本溢出省略号。

text-overflow 属性

text-overflow 属性用于控制文本溢出时的表现形式，可以取三个值：

1. clip：默认值，直接裁剪文本内容，不显示省略号，也不会添加滚动条。
2. ellipsis：将超出的文本内容省略为省略号，同时添加 overflow: hidden 属性使得超出部分不可见。
3. string：可以通过这个值设置自定义的省略符号。

值得注意的是，使用 text-overflow 属性需要配合 white-space 和 overflow 属性使用，如下所示：

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

其中 white-space: nowrap; 的作用是不允许文本换行，而 overflow: hidden; 则是为了设置文本超出部分不可见。

示例

下面是一个使用 text-overflow 实现文本溢出省略号的示例：

<p class="text-ellipsis">这是一段非常非常非常非常非常非常非常非常非常非常非常长的文本内容</p>

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

在上面的例子中，我们创建了一个 text-ellipsis 类，它通过 white-space: nowrap; 不允许文本换行，通过 overflow: hidden; 设置文本超出部分不可见，最后通过 text-overflow: ellipsis; 将超出的文本内容省略为省略号。

自定义省略符号

如果你想使用自定义的省略符号，可以将 text-overflow 的值设置为 string，并使用 CSS content 属性来显示自定义字符串，如下所示：

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: string;
    -webkit-line-clamp: 1; /* 兼容性处理 */
    display: -webkit-box; /* 兼容性处理 */
    -webkit-box-orient: vertical; /* 兼容性处理 */
    content: "......";
}

需要注意的是，如果你想实现多行文本的省略，需要结合 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 来实现。

总结

以上就是使用 text-overflow 属性实现文本溢出省略号的方法，希望对你有所帮助。需要注意的是，由于不同浏览器对属性的支持程度不同，可能需要添加一些兼容性处理。