自适应宽度元素单行文本省略用法探究
單行文本省略是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常常用的技術(shù)，幾乎每個(gè)站點(diǎn)都會(huì)用到。單行文本省略適用于顯示摘要信息的場(chǎng)景，如列表標(biāo)題、文章摘要等。在響應(yīng)式開(kāi)發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對(duì)網(wǎng)頁(yè)開(kāi)發(fā)這造成困擾。因此，本文將要要探究自適應(yīng)寬度元素單行文本省略用法。現(xiàn)代瀏覽器都支持單行文本顯示生省略號(hào)（...）樣式，一般情況下，實(shí)現(xiàn)單行文本省略只需要給元素添加下面三個(gè)CSS樣式：
.demo{text-overflow:ellipsis;white-space: nowrap;overflow: hidden; }?
單行文本省略和元素及其父元素的width屬性都無(wú)關(guān)
有很多文章提到單行文本省略時(shí)都會(huì)添加多一個(gè)條件，那就是設(shè)置width屬性。事實(shí)真的是這樣嗎？通過(guò)下面的實(shí)例去檢驗(yàn)一下就可以證明這個(gè)結(jié)論。
實(shí)例1：在body添加一個(gè)p標(biāo)簽和一個(gè)span標(biāo)簽，并設(shè)置單行文本省略：
<style> body,p,span{margin:0;padding:0; }p, span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden; } </style> <body> <p>單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略</p><span>單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略</span> </body>運(yùn)行結(jié)果是，p標(biāo)簽內(nèi)文本成功省略，span標(biāo)簽內(nèi)文本省略失敗，結(jié)果如下圖：
最后，我嘗試著給p標(biāo)簽設(shè)置寬度為auto或100%，結(jié)果不變；給p標(biāo)簽和span標(biāo)簽設(shè)置固定寬度值為300px，結(jié)果不變；用其他標(biāo)簽把p標(biāo)簽和span標(biāo)簽包裹起來(lái)，結(jié)果不變；給包裹元素設(shè)置固定寬度值，結(jié)果還是一樣的。這就足以證明了單行文本省略和元素及其父元素的width屬性都無(wú)關(guān)。
?
單行文本省略和元素及其父元素的display屬性有關(guān)
什么屬性會(huì)影響單行文本省略呢？在實(shí)例1中，我特意用來(lái)一個(gè)p標(biāo)簽和一個(gè)span標(biāo)簽，span標(biāo)簽無(wú)法省略。經(jīng)過(guò)測(cè)試發(fā)現(xiàn)display屬性為inline和inline-block的元素都無(wú)法實(shí)現(xiàn)省略。這證明單行文本省略與元素的display屬性有關(guān)。
?
1）table元素（或display為table元素）內(nèi)單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式
設(shè)置為table布局元素的子元素單行文本省略不起作用，例如：
<style> body,p,span,img{margin:0;padding:0; }p, span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden; }.demo{display:table;width:100%;padding:15px 0;border-top:1px solid #ddd; }.demo .left, .demo .right{display:table-cell; }.demo .left{width:120px;min-width:120px;height:90px;background-color:blue; }.demo .left img{display:block; }.demo .right{vertical-align: top;padding-left:15px; } </style> <body> <div class="demo"> <div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" /></div> <div class="right"> <h2>這是一個(gè)標(biāo)題</h2> <p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。</p> </div> </div> </body>這個(gè)實(shí)例中，demo元素設(shè)置為dispaly:table，其子元素left和right設(shè)置為display:table-cell，這種布局方式導(dǎo)致了元素right內(nèi)的h2和p的文本省略樣式都不起作用，運(yùn)行結(jié)果如下圖：
為了使元素right內(nèi)的h2和p的文本省略樣式起作用，必須在元素demo（即設(shè)置display:table的元素）添加一條樣式table-layout:fixed，這個(gè)解決方式同樣適用于table元素。添加這個(gè)樣式后，運(yùn)行結(jié)果如下圖：
?
2）display為flex元素的子元素flex-item如果是自適應(yīng)寬度時(shí)，flex-item內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給flex-item添加overflow:hidden樣式
display為flex元素的子元素flex-item如果是自適應(yīng)寬度時(shí)，flex-item內(nèi)的子元素單行文本省略樣式不起作用，例如：
<style> body,h2,p,span,img{margin:0;padding:0;box-sizing:border-box; }.demo{display:flex;display:-webkit-flex;width:100%;padding:15px 0;border-top:1px solid #ddd; }.left, .right{height:90px; }.demo .left{width:120px;background-color:red;flex-shrink: 0; }.demo .right{flex:auto;-webkit-flex:auto;padding-left:15px; }h2, p, span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden; }</style> <body> <div class="demo"><div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" /></div><div class="right"><h2>這是一個(gè)標(biāo)題</h2><p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。</p></div></div> </body>在這個(gè)flex布局的實(shí)例中，元素right的寬度時(shí)自適應(yīng)的，元素right內(nèi)的h2和p元素單行文本省略樣式都不起作用。如果去掉標(biāo)簽直接在元素right內(nèi)添加文本，并為元素right添加單行文本省略樣式，這時(shí)單行文本省略樣式卻可以正常工作。該實(shí)例的運(yùn)行結(jié)果如下圖：
在這個(gè)實(shí)例中，為元素right添加overflow:hidden樣式后，單行文本省略樣式工作正常，運(yùn)行結(jié)果如下圖：
?
?
總結(jié)：
1）單行文本省略必須滿足三個(gè)CSS樣式：text-overflow:ellipsis，white-space: nowrap，overflow: hidden。
2）單行文本省略和元素及其父元素的width屬性都無(wú)關(guān)
3）table元素（或display為table元素）內(nèi)單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式
4）display為flex元素的子元素flex-item如果是自適應(yīng)寬度時(shí)，flex-item內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給flex-item添加overflow:hidden樣式
總結(jié)
以上是生活随笔為你收集整理的自适应宽度元素单行文本省略用法探究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
