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>
属性说明 :
标题 CSS overflow 属性
默认值: | visible |
继承: | no |
版本: | CSS2 |
CSS3 text-overflow 属性
CSS white-space 属性
CSS display 属性
CSS3 box-orient 属性