css设定文本超出一行或多行就隐藏并显示省略号

最新推荐文章于 2025-03-28 15:23:04 发布

YinghaoGuo

最新推荐文章于 2025-03-28 15:23:04 发布

阅读量1.7w

点赞数 2

分类专栏： css篇文章标签： css 文本超出宽度显示省略号

本文链接：https://blog.csdn.net/qq_22855325/article/details/59488692

版权

css篇专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在网页布局中实现文本超过指定行数后显示省略号的效果，包括仅超出一行显示省略号的基本方法及多行文本的处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里要说的是文本超出多行才隐藏文字并且显示省略号而不是超出一行就省略。

首先大家要了解一些基本的文本文字属性的设定，例如white-space(超出是否换行)，letter-spacing（字间距），text-overflow（文字超出如何显示），word-wrap（允许长单词或 URL 地址换行到下一行），overflow（超出块范围如何显示）等等...

（1）首先看一下超出一行就隐藏并显示省略的代码：

width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

都是先规定文本宽度width（或者max-width），然候超出要hidden隐藏，nowarp是不换行属性，ellipsis表示省略号。

（2）对于指定多行文本，超出预期的行数再显示省略号的话，我也百度一下，方案如下：

给标签设定属性,例如span吧:

span{position: relative; max-height: 40px;overflow: hidden;white-space: normal}  
span::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%);  
            }

上述显示两行，超出显示省略号。先声明行高20px，规定最大高度40px（就是显示刚好两行喽），after中的设定是在span这一块最后加一个content，内容是“...”，这种是兼容的办法，不过显示起来会稍稍有点丑。

（3）由于最近在写手机端，涉及到文本超出两行显示省略号，于是乎，一种方法诞生了，直接上代码：

span{  
    display: block;  
    font-family: PingFangSC-Regular;  
        font-size: 14px;  
        color: #482929;  
        letter-spacing: 0;  
        line-height: 20px;  
overflow:hidden;  
        text-overflow:ellipsis;  
        white-space: normal;  
        display:-webkit-box;  
        -webkit-box-orient:vertical;  
        -webkit-line-clamp:2;/*规定最多显示两行*/  
}

注：这个方法适用webkit核浏览器和手机端，效果如下图：