CSS文本超出2行就隐藏并且显示省略号,单行居中，两行居左

骑猪看日落 2022-05-11 10:48 584阅读 0赞

css的基础属性 :

overflow:hidden;            //超出的文本隐藏 
    
    text-overflow:ellipsis;     //溢出用省略号显示
    
    white-space:nowrap;         //溢出不换行,只能显示一行

css3属性 :

display:-webkit-box;            //将对象作为弹性伸缩盒子模型显示。
    
    -webkit-box-orient:vertical;    //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    
    -webkit-line-clamp:2;           //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

CSS文本超出2行就隐藏并且显示省略号,代码如下 :

overflow:hidden; 
    
    text-overflow:ellipsis;
    
    display:-webkit-box; 
    
    -webkit-box-orient:vertical;
    
    -webkit-line-clamp:2;

实现单行居中，两行居左，超过两行省略

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                display:inline-block;   
                text-align:left;
            }
            span{
                display:-webkit-box;
                -webkit-line-clamp:2;
                -webkit-box-orient:vertical;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            div{
                border: 1px solid red;
                font-size: 30px;
                text-align:center;
                width: 800px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div>
            <p><span>单行居中，多行居左</span></p>
        </div>
    </body>
    </html>