CSS 实现单行、多行文本溢出显示省略号（…）

最新推荐文章于 2026-05-02 05:28:00 发布

原创最新推荐文章于 2026-05-02 05:28:00 发布 · 3k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

web前端同时被 3 个专栏收录

74 篇文章

订阅专栏

项目小记

20 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行和多行文本溢出时显示省略号的效果。对于单行文本，可以使用text-overflow: ellipsis属性；而对于多行文本，可以结合-webkit-line-clamp、-webkit-box和-webkit-box-orient属性来实现，但这种方法仅适用于WebKit浏览器和移动端。还提供了一种改进方法，通过伪类添加省略号，但需要注意在不同浏览器的兼容性问题。

1、单行文本溢出显示省略号

直接用 css 属性 text-overflow: ellipsis; 设置：

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

2、多行文本溢出显示省略号

直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置：

{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

Tips:

-webkit-line-clamp: 限制在一个块元素显示的文本的行数，为了实现该效果，需要结合其他的属性：

display: -webkit-box; // 必须结合的属性，将对象作为弹性伸缩盒子模型显示

-webkit-box-orient // 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

因为使用了 webkit 的 css 扩展属性，该方法适用于 webkit 浏览器及移动端。

改进方法：通过伪类在目标元素末尾处添加省略号。

    .setEllipsis {
        border: 1px solid #ccc;
        position: relative;
        max-height: 90px;
        overflow: hidden;
    }
    .setEllipsis::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 40px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
    }

该方法适用范围广，但也有局限性：文字未超出行的情况下也会出现省略号。可结合 js 进行优化：

1.将 height 设置为 line-height 的整数倍，防止超出的文字露出。

2.给 p::after 添加渐变背景可避免文字只显示一半。

3.由于 ie6-7 不显示 content 内容，所以要添加标签兼容 ie6-7（如：<span>…<span/>）；兼容 ie8 需要将 ::after 替换成 :after。

实现效果：

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<style style="text/css">
    .wrapper {
        width: 400px;
        line-height: 30px;
    }
    .text {
        border: 1px solid #ccc;
        height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .multiText {
        border: 1px solid #ccc;
        height: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .setEllipsis {
        border: 1px solid #ccc;
        position: relative;
        max-height: 90px;
        overflow: hidden;
    }
    .setEllipsis::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 40px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
    }
</style>
</head>
<body>
    <div class="wrapper">
        <h4>单行文本超出显示...</h4>
        <div class="text">单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号</div>

        <h4>多行文本超出显示...</h4>
        <div>方法一（通过-webkit-line-clamp: 3;实现）</div>
        <div class="multiText">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div>
        <div>方法二（通过伪类实现）</div>
        <div class="setEllipsis">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div>
    </div>
</body>
</html>