CSS单行/多行文本溢出显示省略号

最新推荐文章于 2025-05-16 09:48:22 发布

chiling_1024

最新推荐文章于 2025-05-16 09:48:22 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.youkuaiyun.com/chiling_1024/article/details/80487473

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS及JavaScript实现文本溢出时显示省略号的效果，包括单行和多行文本处理方法。

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

CSS文本溢出显示省略号

问题背景：在一些网站的首页或者简略的文章介绍时，我们常常会让超出规划区域的文本隐藏，以增强用户体验
解决方案：

方案一单行文本自动省略号

    .overflow{
        word-break:break-all;   
        white-space:no-wrap;  /*不换行*/
        overflow:hidden;  /*溢出隐藏*/
        text-overflow:ellipsis;  /*文本溢出省略号*/
    }

注意点：该方案只能够实现单行文本溢出省略号

方案二针对webkit内核的浏览器
用他的私有属性-webkit-line-clamp，配合其他几个属性（display:-webkit-box、-webkit-oridient、text-overflow:ellipsis），就可以完美实现单行或多行的文本溢出显示省略号了
代码：
```
     .overflow{
        display:-webkit-box;     /*设置对象为伸缩盒子模型*/
        -webkit-box-orient:vertical;  /*伸缩盒对象排列方式为垂直*/
        text-overflow:ellipsis;  /*文本溢出的时候省略号处理*/
        -webkit-line-clamp:2;  /*限制一个块元素显示的行数*/
        overflow:hidden;  /*将溢出的部分隐藏起来*/
     }
```
注意点：该方案只是针对webkit内核的进行了实现，对于火狐等浏览器并没有效果
- 方案三
  使用javascript计算文本字数，一旦超出就截断并加上省略号的方法

    var maxLength = 18;  //最长的字符串长度
    if($('.overflow').text().length > maxLength){
        $('.overflow').text($('.overflow').text().substring(0,maxLength) + '...'); //截取字符串并在结尾添加上...
    }

使用JavaScript实现文本溢出的方法还有很多种，大家可以在参考链接里面找到更好的
参考链接：
[1] WEB前端开发
[2] 多行文本溢出显示省略号的JS实现
[3] 鑫大大的博客

前端小白，请多多指教