CSS 限制文本显示行数

文章目录CSS限制文本显示行数假设需求解决方案CSS样式示例Demo浏览器页面效果CSS限制文本显示行数假设需求有若干段文本内容，要显示在一个盒子内，宽高限制；要求只能显示5行，超出的部分自动溢出隐藏，第五段末尾用省略号结尾。解决方案设置对象的盒子模型为弹性伸缩盒子display:-webkit-box;设置伸缩盒子的子元素排列方式-webkit-box-orient:vertical;溢出不换行

Silly夏

7551人浏览 · 2021-06-08 21:56:19

Silly夏 · 2021-06-08 21:56:19 发布

文章目录

CSS限制文本显示行数

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>