您好,欢迎来到舟合美食网。
搜索
您的当前位置:首页CSS实现单行、多行文本溢出显示省略号的方法

CSS实现单行、多行文本溢出显示省略号的方法

来源:舟合美食网


代码实现:

//单行

.single-line{

width:200px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

<p class="single-line"></p>

//多行

.multiple-line{

width:200px;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

}

注意:由于使用的是WebKit的CSS扩展属性,所以该方法只适用于WebKit浏览器及移动端;

Copyright © 2019- zhouheie.com 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务