CSS 单行/多行文本溢出显示省略号(...)的实现
作者:
WangMin
格言:努力做好自己喜欢的每一件事
我们在项目开发的过程中也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本。而这个需求可以分解为两个,一个是单行溢出省略,一个是多行溢出省略。下面我们就开始一起学习吧!
1|0实现文本超出显示省略号的常见属性
1)overflow: hidden
这里我们需要注意到一点:这里的overflow并不是设置为父级元素div的属性,而是给需要文本省略的标签的属性,需要和overflow的普通用法区分开来。
- overflow:hidden的普通用法:用在块级元素(例如div)的外层隐藏溢出的内部元素。
2)text-overflow: clip / ellipsis;
这一属性依赖于overflow: hidden存在,只有设置了overflow:hidden它才是能够生效的,你可以把它看作overflow对于文本溢出隐藏的一种特殊表现样式。
clip:当元素内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉,默认值。
ellipsis:当元素内文本溢出时显示省略标记(…)。
注意:使用ellipsis时,必须配合overflow:hidden;white-space:nowrap;width:具体值;这三个样式共同使用才会有效果。
3)white-space: nowrap
它的作用是让文本不换行,这是overflow:hidden和text-overflow:ellipsis生效的基础!没有它overflow:hidden和text-overflow:ellipsis无法生效!(只适用于单行文本溢出省略)
4)-webkit-line-clamp: 数值(表示显示多少行);
用来限制在一个块元素显示的文本的行数,例如 -webkit-line-clamp: 2 表示最多显示 2 行。这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。 为了实现该效果,它需要组合其他的WebKit属性。(适用于多行文本溢出省略)
5)display: -webkit-box;(和 -webkit-line-clamp: 2;结合使用,将对象作为弹性伸缩盒子模型显示 )(适用于多行文本溢出省略)
6)-webkit-box-orient: vertical;(和 -webkit-line-clamp: 2;结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )(适用于多行文本溢出省略)
2|0单行文本溢出的省略
需要在文本容器上设置overflow: hidden;white-space: nowrap;text-overflow: ellipsis这几个属性,还要给文本容器设置宽度(例如 width:200px)使overflow: hidden;生效,才能实现单行文本溢出的省略。代码与效果如下:
- 兼容性好,对各大主流浏览器有好的支持
- 响应式截断,根据不同宽度做出调整
- 文本溢出范围才显示省略号,否则不显示省略号
- 省略号位置显示刚好
3|0多行文本溢出的省略
从上面可以得到文本溢出我们经常用到的应该就是 text-overflow:ellipsis
与 overflow: hidden
了,但是对于多行文本的溢出处理确接触的不是很多。那么这里呢,就要给大家介绍一个属性 line-clamp
,但这个属性的兼用性差,只有 WebKit 内核的浏览器才支持,所以需要在属性前面加上 -webkit- 。-webkit-line-clamp的含义上面也已经提到了,它是用来限制在一个块元素显示的文本的行数。 为了实现这个效果,它需要组合上面提到的其他的WebKit属性:
- display: -webkit-box 将对象作为弹性伸缩盒子模型显示;
- -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;
- text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。
代码与效果如下:
[ 注意 ]
1、四行CSS缺一不可!
2、因为这是webkit的CSS属性扩展,所以兼容浏览器范围是PC端的webkit内核的浏览。器:chrome/safari/QQ浏览器/360/猎豹等以及绝大多数的移动端浏览器。
以下是-webkit-line-clamp在各个浏览器的兼容:
目前没有什么CSS的属性可以直接控制多行文本的省略显示,比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了,代码参考如下:
文本中如果有英文,希望让一个单词能够在换行时进行拆分,我们可以添加 word-break: break-all;
代码效果如下:
不过这样有时候会让整个单词显示不完整,根据自己的需求来使用这个属性。
利用第二种的多行文本省略方式会有一点问题:
- 无法识别文字的长短,无论文本是否溢出范围,一直显示省略号省略号。
- 显示可能不会刚刚好,有时会遮住一半文字,跟文字没有贴合的很紧密。这里'属'就被遮住了一部分。
- 需要知道显示的行数并设置行高才行。
- IE6/7不支持after和content,需要添加一个标签来代替。
- 省略号的背景颜色跟文本背景颜色一样,并且可能会遮住部分文字,建议可以使用渐变的png背景图片代替。
以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!
__EOF__

本文链接:https://www.cnblogs.com/wmbuke/p/13756017.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签