CSS3属性中的text-overflow:ellipsis详解
这篇文章主要介绍了CSS3属性中的text-overflow:ellipsis详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
语法：
text-overflow:clip | ellipsis
默认值为clip 不显示省略标记
clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(...)。
一、常见的单行文本溢出显示省略写法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
多行文本溢出显示多行文本溢出显示多行文本溢出显示
二、多行文本溢出
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；
display:-webkit-box;
-webkit-line-clamp: 3/*第几行裁剪*/
-webkit-box-orient:vertical;
多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示
其它浏览器的话就需要通过js实现：
多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示
到此这篇关于CSS3属性中的text-overflow:ellipsis详解的文章就介绍到这了,更多相关css3 text-overflow:ellipsis属性内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！
标签：