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

最新推荐文章于 2024-07-31 17:04:01 发布

小小码农披荆斩棘

最新推荐文章于 2024-07-31 17:04:01 发布

阅读量1.5w

点赞数 2

本文链接：https://blog.csdn.net/qq_25386583/article/details/78427449

版权

html5 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

css3

1 篇文章 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>