CSS超出显示省略号

当内容超出容器宽度时，可以通过CSS实现用省略号“...”来代替超出部分的文本。解决方案主要是使用white-space、overflow和text-overflow三个属性配合实现。

基本实现方法

最简单的实现方式如下：

css
.ellipsis {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号替代隐藏的文本 */
width: 200px; /* 设置一个固定宽度 */
}


html</p>

<div class="ellipsis">
    这是一段非常长的文本，如果超出了设定的宽度，则会显示省略号。
</div>

<p>

这种方式适用于单行文本的省略处理。

多行文本省略

对于多行文本的省略，可以使用以下方法：

使用line-clamp

现代浏览器支持-webkit-line-clamp属性，可以很方便地实现多行文本省略。

css
.multiline-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 设置显示的行数 */
overflow: hidden;
text-overflow: ellipsis;
}


html</p>

<div class="multiline-ellipsis">
    这是一个多行文本的例子。如果文本超出了三行的限制，那么超出的部分将会被省略号代替。
</div>

<p>

使用伪元素

如果不支持-webkit-line-clamp，还可以通过伪元素实现类似效果。

css
.multiline-ellipsis-alt {
    position: relative;
    height: 6em; /* 根据字体大小设置高度 */
    overflow: hidden;
}</p>

<p>.multiline-ellipsis-alt::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    background: white; /* 匹配背景颜色 */
    padding-left: 5px;
}

html</p>

<div class="multiline-ellipsis-alt">
    这里是另一种多行文本省略的方法。通过伪元素添加省略号，并确保只显示指定高度内的内容。
</div>

<p>

以上方法可以根据具体需求选择使用，无论是单行还是多行文本，都可以优雅地处理超出容器宽度的情况。