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

一个新手
一个新手 原创
2017-09-19 09:28:37 1154浏览

代码实现:

//单行

.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浏览器及移动端;

以上就是CSS实现单行、多行文本溢出显示省略号的方法的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。