文章目录
CSS限制文本显示行数假设需求解决方案CSS样式示例Demo浏览器页面效果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; /*只显示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>
