css实现超出文本溢出用省略号代替

CSS文本溢出省略处理

最新推荐文章于 2025-07-19 15:06:59 发布

原创最新推荐文章于 2025-07-19 15:06:59 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的方法，包括适用于WebKit浏览器内核的-webkit-line-clamp属性及通过伪元素实现的技巧。

一、单行

直接上代码：

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

效果如下：
这里写图片描述

二、多行

下次更新，拜拜

——————————–割—— 3月20日更新 ——————————–

原理1：

不考虑兼容性的，适用于WebKit浏览器内核的。

css代码：

     .box {
            width: 400px;
            height: 65px;
            margin: 100px auto;
            border: 1px solid #ccc;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /*截取第三行*/
            overflow: hidden;
        }

html代码：

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae dolore eius in modi placeat quos tempore!
    Assumenda commodi corporis distinctio fuga nam odio, perferendis quia quisquam rem, tempore ut!
    Lorem ipsum dolor sit consectetur elit adipisicing. Amet, beatae dolore eius in modi placeat quos tempore!
    Assumenda commodi corporis distinctio fuga nam odio, perferendis quia quisquam rem, tempore ut!
</div>

效果：

这里写图片描述

PS：听说可以用jQuery兼容，请百度。

——————————————–割——————————————–

原理2：

容器设置溢出隐藏；
后置内容生成一个内容为“...”的伪元素，绝对定位到指定宽高的容器右下角，实现多行溢出点点点。

css代码：

 .box {
            width: 400px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid #ccc;
            position: relative;
            line-height: 20px;
            overflow: hidden;
        }

        .box::after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 10px;
            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%);
        }

html代码：

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae dolore eius in modi placeat quos tempore!
    Assumenda commodi corporis distinctio fuga nam odio, perferendis quia quisquam rem, tempore ut!
    Lorem ipsum dolor sit consectetur elit adipisicing. Amet, beatae dolore eius in modi placeat quos tempore!
    Assumenda commodi corporis distinctio fuga nam odio, perferendis quia quisquam rem, tempore ut!
</div>

效果：

这里写图片描述