一、测试代码结构:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .text { } </style> </head> <body> <div class="text"> 王力宏常被尊称为“亚洲流行音乐天王”,于亚洲国家有着巨大的影响力,尤其在中国大陆,台湾, 香港,马来西亚,新加坡,日本, 韩国乃至印度等国家,其音乐作品让华语流行音乐获得西方国 家如美国、英国、澳大利亚等地区所关注及接受,2010年英国权威音乐 杂志《WORD》封其为“东方猫王”。 王力宏先后展开了四个世界巡回演唱会,也是第一个在中国鸟巢举办演唱会的流行音乐歌手。 </div> </body> </html>
一、单行文本显示省略符
.text { margin: auto; width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
需要使用:
over-flow: hidden 防止div元素出现滚动条
white-space:nowrap 禁止文本换行
text-overflow: ellipsis 文本移除显示省略符
效果图;
二、固定多行文本显示省略符
1.webkit内核的浏览器
.text { margin: auto; width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
除了使用overflow和text-overflow之外,还必须使用一下三个属性,缺一不可:
display: -webkit-box 设置元素为弹性伸缩盒模型
-webkit-line-clamp: 2 设置文本显示行数
-webkit-box-orient: vertical 设置弹性伸缩盒子的子元素的排列方式
显示效果:
2.其他版本浏览器实现方法
使用伪元素在文本后面添加省略符。不过这种实现可能存在遮挡文字的情况,而且需要精确计算伪元素的位置
.text { position: relative; margin: auto; width: 300px; font-size: 16px; line-height: 16px; height: 32px; overflow: hidden; } .text::after { content: '...'; position: absolute; right: 0; bottom: 0; }
效果:
这种如果在文字不多的时候也会显示省略号。解决的办法是通过js去判断文字是否有溢出,从而决定是否显示添加伪类