CSS限制文本显示行数
假设需求
- 有若干段文本内容,要显示在一个盒子内,宽高限制;
- 要求只能显示5行,
- 超出的部分自动溢出隐藏,
- 第五段末尾用省略号结尾。
解决方案
- 设置对象的盒子模型为弹性伸缩盒子display:-webkit-box;
- 设置伸缩盒子的子元素排列方式-webkit-box-orient:vertical;
- 溢出不换行white-space:nowrap;
- 设置显示的行数-webkit-line-clamp:5;
- 溢出文本隐藏overflow:hidden;
- 溢出部分用省略号显示text-overflow:ellipsis ;
CSS样式
display:-webkit-box;
-webkit-box-orient:vertical;
white-space:nowrap;
line-clamp:5;
-webkit-line-clamp:5;
overflow:hidden;
text-overflow:ellipsis ;
overflow: hidden!important;
display: -webkit-box!important;
-webkit-box-orient: vertical!important;
-webkit-line-clamp: 1!important;
white-space: pre-wrap!important
示例Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>限制显示文字的行数</title>
<style>
.line_2{
width: 600px;
height: 200px;
background: silver;
margin: auto;
margin-top: 100px;
padding: 0 10px;
box-sizing: border-box;
}
.line_2 p{
font-size: 20px;
color: #000;
line-height: 30px;
}
p{
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 6;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
}
h3{
width: 300px;
text-align: left;
margin: auto;
line-height: 30px;
font-size: 20 px;
color: #666;
margin-top: 50px;
background: silver;
}
</style>
</head>
<body>
<div class="line_2">
<p>
我愿中国青年都摆脱冷气,只是向上走,不必听自暴自弃流的话。能做事的做事,能发声的发声。有一分热,发一分光。就令萤火一般,也可以在黑暗里发一点光,不必等候炬火,此后如竟没有炬火,我便是唯一的光,倘若有了炬火,出了太阳,我们自然心悦诚服的消失,不但毫无不平,而且还要随喜赞美这炬火或太阳;因为它照了人类,连我都在内。
休学储能,先博后渊。
天地苍苍,乾坤茫茫,中华少年,顶天立地当自强。中国少年者,则中国少年之责任也,故今日之责任,不在他人,而全在我少年。少年智则国智,少年富则国富,少年强则国强,少年独立则国独立;少年自由则国自由,少年进步则国进步,少年胜于欧洲,则国胜于欧洲,少年雄于地球,则国雄于地球。
</p>
<h3>
只显示6行文字内容,超出的文字内容溢出隐藏,并以省略号代替被修剪隐藏的部分
</h3>
</div>
</body>
</html>
浏览器页面效果