用css控制字数，超出部分显示省略号

Joker • • 前端笔记 • 267 阅读

有时候需要控制下文字数，不然就会溢出，页面就会变样不美观。这时我们就可以用css控制字数，超出部分显示省略号。可以不换行，超出部分显示省略号，也可以可以换行，多行，超出部分显示省略号。

用css控制字数，超出部分显示省略号

1.不换行，超出部分显示省略号





用css控制字数，超出部分显示省略号

*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隐藏*/
overflow:hidden;
/*不换行设定*/
white-space:nowrap;
/*超出部分的文字显示省略号*/
text-overflow:ellipsis;
}



用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号

效果图如下：

不换行，超出部分显示省略号

2.可以换行，多行，超出部分显示省略号





可以换行，多行，超出部分显示省略号

*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}



1.用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号
2.用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号

效果图如下：

可以换行，多行，超出部分显示省略号

注：此方法适用于WebKit浏览器及移动端。