html设置文字超过字数_用css控制字数，超出部分显示省略号

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

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

用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.可以换行，多行，超出部分显示省略号html>

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

*{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浏览器及移动端。

爆款服务器

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！