自适应宽度元素单行文本省略用法探究
單行文本省略是現代網頁設計中非常常用的技術，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應式開發中，自適應寬度元素單行文本省略容易失效不起作用，對網頁開發這造成困擾。因此，本文將要要探究自適應寬度元素單行文本省略用法。現代瀏覽器都支持單行文本顯示生省略號（...）樣式，一般情況下，實現單行文本省略只需要給元素添加下面三個CSS樣式：
.demo{text-overflow:ellipsis;white-space: nowrap;overflow: hidden; }?
單行文本省略和元素及其父元素的width屬性都無關
有很多文章提到單行文本省略時都會添加多一個條件，那就是設置width屬性。事實真的是這樣嗎？通過下面的實例去檢驗一下就可以證明這個結論。
實例1：在body添加一個p標簽和一個span標簽，并設置單行文本省略：
<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>運行結果是，p標簽內文本成功省略，span標簽內文本省略失敗，結果如下圖：
最后，我嘗試著給p標簽設置寬度為auto或100%，結果不變；給p標簽和span標簽設置固定寬度值為300px，結果不變；用其他標簽把p標簽和span標簽包裹起來，結果不變；給包裹元素設置固定寬度值，結果還是一樣的。這就足以證明了單行文本省略和元素及其父元素的width屬性都無關。
?
單行文本省略和元素及其父元素的display屬性有關
什么屬性會影響單行文本省略呢？在實例1中，我特意用來一個p標簽和一個span標簽，span標簽無法省略。經過測試發現display屬性為inline和inline-block的元素都無法實現省略。這證明單行文本省略與元素的display屬性有關。
?
1）table元素（或display為table元素）內單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式
設置為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>這是一個標題</h2> <p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。</p> </div> </div> </body>這個實例中，demo元素設置為dispaly:table，其子元素left和right設置為display:table-cell，這種布局方式導致了元素right內的h2和p的文本省略樣式都不起作用，運行結果如下圖：
為了使元素right內的h2和p的文本省略樣式起作用，必須在元素demo（即設置display:table的元素）添加一條樣式table-layout:fixed，這個解決方式同樣適用于table元素。添加這個樣式后，運行結果如下圖：
?
2）display為flex元素的子元素flex-item如果是自適應寬度時，flex-item內的子元素實現單行文本省略，需要給flex-item添加overflow:hidden樣式
display為flex元素的子元素flex-item如果是自適應寬度時，flex-item內的子元素單行文本省略樣式不起作用，例如：
<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>這是一個標題</h2><p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。</p></div></div> </body>在這個flex布局的實例中，元素right的寬度時自適應的，元素right內的h2和p元素單行文本省略樣式都不起作用。如果去掉標簽直接在元素right內添加文本，并為元素right添加單行文本省略樣式，這時單行文本省略樣式卻可以正常工作。該實例的運行結果如下圖：
在這個實例中，為元素right添加overflow:hidden樣式后，單行文本省略樣式工作正常，運行結果如下圖：
?
?
總結：
1）單行文本省略必須滿足三個CSS樣式：text-overflow:ellipsis，white-space: nowrap，overflow: hidden。
2）單行文本省略和元素及其父元素的width屬性都無關
3）table元素（或display為table元素）內單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式
4）display為flex元素的子元素flex-item如果是自適應寬度時，flex-item內的子元素實現單行文本省略，需要給flex-item添加overflow:hidden樣式
總結
以上是生活随笔為你收集整理的自适应宽度元素单行文本省略用法探究的全部內容，希望文章能夠幫你解決所遇到的問題。
