CSS设置文本溢出显示省略号

小半 • 2024年2月29日下午3:23 • 前端开发 • 阅读 254

开发过程中，当文本显示返回不能完全显示文本信息，往往为了样式的美观，我们需要将不能显示的部分文本进行隐藏，通过三个省略号的方式进行展示，本文介绍如何通过CSS设置样式的文本省略显示。

CSS设置文本省略号的常见分为两种：单行文本省略、多行文本省略。

1、单行文本溢出省略

如下是设置单行文本的样式代码，设置溢出省略需要注意如下几点：

溢出元素区域需要是块状元素
宽度需要是固定
需要设置overflow: hidden;样式，保证不超出显示
单行设置需要设置white-space: nowrap;禁止换行

<div class="single" title="提示信息">
这里是这是单行文本的溢出测试信息文本圣诞节福利受打击了~
</div>
<style>
.single {
   display:inline-block; // 需要设置溢出设置需要是块状元素
   width:150px; //设置宽度
   overflow: hidden;//溢出隐藏，一定要设置，不设置会超出显示
   white-space: nowrap; // 强制一行显示
   text-overflow: ellipsis;// 显示。。。省略号
}
</style>

2、多行文本溢出省略

多行设置的内容和单行大致一样，但需要设置设置行数等信息，代码如下：

<div class="multi">
这里是这是多行文本的溢出测试信息文本圣诞节福利受打击了~
</div>
<style>
.multi{
    display:-webkit-box;  // 将对象作为弹性伸缩盒子模型显示
    -webkit-box-orient:vertical;

    -webkit-line-clamp:2; // 设置最多显示几行
    line-clamp: 2;
    width:150px; //设置宽度
    overflow: hidden;//溢出隐藏，一定要设置，不设置会超出显示

    text-overflow: ellipsis;// 显示。。。省略号
}
</style>