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