CSS3属性中的text-overflow:ellipsis详解

这篇文章主要介绍了CSS3属性中的text-overflow:ellipsis详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

语法:

text-overflow:clipellipsis

默认值为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技术站!

以上就是CSS3属性中的text-overflow:ellipsis详解的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑