CSS學習筆記：溢位文字省略（text-overflow）

傑克.陳發表於2014-09-21
CSS筆記
原文:CSS學習筆記：溢位文字省略（text-overflow）

在CSS3中，text-overflow屬性的基本語法如下：

  • clip:表示不顯示省略文字，簡單的裁切。
  • ellipsis:表示物件文字溢位時顯示省略標記，省略標記插入的位置是最後一個字元。
  • ellipsis-word：表示當物件文字溢位時顯示省略標記，省略標記插入的位置是最後一個詞（word）。

實際上，text-overflow屬性僅用於決定當文字溢位時是否顯示省略標記，並不具備樣式定義的功能，要實現溢位時產生省略號的效果，應該在定義兩個樣式：強制文字在一行內顯示（white-space:nowrap）和溢位內容為隱藏（overflow:hidden），只有這樣才能實現溢位文字顯示為省略號效果。

案例：

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             dl{
 8                 width:240px;
 9                 border: solid 1px #ccc;
10                 }
11             dt{
12                     padding:8px 8px;
13                     background: #7fecad;
14                     font-size: 13px;
15                     text-align: left;
16                     font-weight: bold;
17                     color: #71790c;
18                     margin-bottom: 12px;
19                     border-bottom: solid 1px #efefef;
20                 }
21             dd{
22                 font-size: 0.78em;
23                 height: 1.5em;
24                 width: 220px;
25                 padding:2px 2px 2px 18px;
26                 margin:2px 0;
27                 white-space: nowrap;
28                 overflow: hidden;
29                 text-overflow: ellipsis;
30             }
31         </style>
32     </head>
33     <body>
34         <dl>
35             <dt>體育新聞</dt>
36             <dd>亞運會在韓國港口城市仁川開幕，韓國總統朴槿惠出席</dd>
37             <dd>在亞運會首日，韓國軍團佔據獎牌榜第一位</dd>
38             <dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
39             <dd>亞運會在韓國港口城市仁川開幕，韓國總統朴槿惠出席</dd>
40             <dd>在亞運會首日，韓國軍團佔據獎牌榜第一位</dd>
41             <dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
42         </dl>
43     </body>
44 </html>

 效果：


相關文章