單行文本省略是現代網頁設計中非常常用的技術，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應式開發中，自適應寬度元素單行文本省略容易失效不起作用，對網頁開發這造成困擾。因此，本文將要要探究自適應寬度元素單行文本省略用法。現代瀏覽器都支持單行文本顯示生省略號（...）樣式，一般情況下，實現單行文本省略只需要給元素添加下面三個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樣式
