CSS在布局的時候，會考慮到網頁整體效果，會把超出某個DIV的文字自動省略，顯示省略號，倘若不用CSS，那就需要用服務器端動態腳本來截取文字來實現了。殺雞還是不要用牛刀，能在客戶端實現的就不要交給服務器了。費話不多說了，本篇 CSS教程向你演示如何自動縮略超出的文字，變成省略號。先來看CSS定義部分的代碼：
01
<style type="text/CSS">
02
.divout {
03
display: inline-block;
04
white-space: nowrap;
05
Word-wrap: normal;
06
width: 100%;
07
overflow: hidden;
08
-ms-text-overflow: ellipsis;
09
-o-text-overflow: ellipsis;
10
-webkit-text-overflow: ellipsis;
11
text-overflow: ellipsis;
12
}
13
</style>
Html測試代碼部分：
1
<div class="divout" style="width:100px;">
2
源碼愛好者為您提供精品的網頁特效、網頁教程，還有面向初學者的各類編程代碼，助您早日成功編程高手。
3
</div>
運行結果如下：
源碼愛…
這樣就把超出部分的文字自動隱藏了，CSS並為其自動添加了“…”省略號，很實用吧？