您的位置:首页 > Web前端 > CSS

CSS设置一行文字,超出部分自动隐藏

2015-09-26 16:33 691 查看
.textone {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 25px;
max-height: 25px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了,设置超过两行自动隐藏是效果,如下代码:

line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下:

.textTow {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 23px;
max-height: 46px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: