原文地址: https://www.xksblog.top/the-p...
text-overflow
是CSS3中的屬性,它規定了當文本溢出其包含元素時以何種方式顯示。但在使用的時候,有時會發現這個text-overflow
設置了屬性怎麼不起做用呀?如今咱們就來踩踩這裏面的坑。css
text-overflow: [ clip | ellipsis | <string> ]{1,2}
html
clip
:默認值,將溢出的文本裁減掉ellipsis
:將溢出的文本用省略號(...)來表示<string>
:設置一個字符串用來表示溢出的文本兼容性上,除了<string>
外,其他兩個屬性兼容到了IE6+,因此大可放心使用。web
text-overflow: ellipsis; /* IE 6, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ -o-text-overflow: ellipsis; /* Opera 9-10 */
text-overflow
只是規定了文本溢出後的顯示樣式,但它不會強制文本溢出,這也就是不少時候,咱們雖然設置了text-overflow: ellipsis
,但文本其實沒有表現出"溢出"特性,因此固然也就不起做用。瀏覽器
解決方法:async
width: 100%; /*也能夠是固定值、min-width這些*/ white-space: nowrap; /*強制文本不能換行*/ overflow: hidden; /*隱藏溢出內容*/ text-overflow: ellipsis;
<a>
、<span>
這種行內元素,請再加上display: block
,由於行內元素的默認寬度就是文字的寬度且沒法設置width效果對比:
<script async src="//jsfiddle.net/stay1100/zxrfy5gj/embed/result,html,css/dark/"></script>wordpress
相比單行溢出,多行溢出就要更爲複雜一點,要用到伸縮盒子的概念:display: -webkit-box;
。學習
估計也就這時候能看到這個概念了,如今
display:flex
已經取代了box這種不正規的寫法。
具體代碼參考:flex
width: 100%; overflow: hidden; word-break: break-all; /*容許在單詞內換行,更美觀*/ text-overflow: ellipsis; display: -webkit-box; /*元素做爲box伸縮盒子*/ -webkit-line-clamp: 3; /*設置文本行數限制*/ -webkit-box-orient: vertical; /*設置文本排列方式*/
這個方法合適WebKit瀏覽器以及移動端,其餘瀏覽器的實現方案能夠參考如下文章:
以上是我對text-overflow
的一些淺顯理解,哪裏有錯誤之處還望指正。更多進階高能的方法在上面的參考文章中都有提到,等之後用到了再好好研究下。.net
學習老是由淺入深,也沒辦法一會兒吃成個大胖子,但願之後能不斷重構本身的知識體系,分享更有深度的文章~