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

来源：互联网发布：手机景点讲解器软件编辑：程序博客网时间：2024/05/18 21:06

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>