CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
生活随笔
收集整理的這篇文章主要介紹了
CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對于text-overflow:ellipsis,文本超出部分顯示...,但要實現這個效果,卻有一些必備條件,如下:
div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*其他屬性*/ }三個條件缺一不可,但是這些屬性只能實現一行文本顯示...,而對于要顯示多行文本,并且只有最后一行顯示...,就不適用了,所以需要修改樣式,如下:
div{overflow: hidden;text-overflow: ellipsis;height: 60px;display: -webkit-box; -webkit-line-clamp: 3; /*可指定任一行顯示...效果*/ -webkit-box-orient: vertical; /*此時不需要white-space:nowrap;*/ }看到新增的屬性,應該就知道,他不是通用的,只針對webkit內核瀏覽器,而對于最TM神奇的IE瀏覽器,只能使用插件了,jq插件地址:http://dotdotdot.frebsite.nl/,使用方法,如下:
?
轉載于:https://www.cnblogs.com/web-wjg/p/7424403.html
總結
以上是生活随笔為你收集整理的CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 22. 链表中倒数第k个节点
- 下一篇: CSS 层级选择器