在頁面顯示中我們經常會需要進行省略，比如簡介裏面的省略，比如固定div中字數超過限制之後的省略。我們可以用css輕鬆做到。
單行文字的省略
單行文字省略比較簡單。關鍵代碼如下：
<style>
.single {
width: 280px;
text-overflow: ellipsis; /* 文本溢出時顯示省略號來代表被修剪的文本 */
white-space: nowrap; /* 段落中的文本不進行換行 */
overflow: hidden; /* 溢出部分隱藏 */
border:1px solid red;
}
</style>
<body>
<p class="single">春天，又稱春季，是四季中的第一個季節，指立春至立夏期間，含節氣有立春、雨水、驚蟄、春分、清明、穀雨</p>
</body>最終的效果是：
當一行中的文本不固定的時候，可以設置一個max-width，當超過這個最大寬度，就進行省略，其他的時候不省略。常見應用如：歷史搜索記錄裏面的記錄顯示。
多行文字的省略
多行文字的省略可以用css來做，也可以用js來做。先來看看css的做法。
css：
多行文字的省略主要用到-webkit-line-clamp屬性，主要用來限制在一個塊元素顯示的文本的行數。但是這個屬性不規範，要實現該效果，必須結合其他外來的WebKit屬性。
來看具體實現：
<style>
/*讓文字只顯示2行*/
.main-agency {
width: 280px;
overflow: hidden;
text-overflow: ellipsis; /* 文本溢出時顯示省略號來代表被修剪的文本 */
display: -webkit-box; /* 必須結合的屬性 ，將對象作爲彈性伸縮盒子模型顯示 */
-webkit-box-orient: vertical; /* 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 文本需要顯示多少行 */
}
</style>
<body>
<div class="main-agency">feeeeeeeeeeee菲菲姐而非減肥法金額菲艾斯阿金費分解分解發黑髮黃三板斧非法即使對方是反黑反腐的勝利會計法撒開了分解機菲菲姐寬帶連接覅記得發分解飛機佛山飛機奧利弗降低房價大幅eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</body>最終顯示的效果如下：
這個省略的效果也可以用js來做：
js：
<script>
function subEllipsis(content) {
content = content.length>24 ? content.substring(0,23)+'...' : content
}
</script>js的做法適用於最多適配多少個字符的情況，但是如果想控制顯示幾行的話，css的方式顯然更加方便。