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

傑克.陳發表於2014-09-21
CSS筆記

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

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

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

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            dl{
                width:240px;
                border: solid 1px #ccc;
                }
            dt{
                    padding:8px 8px;
                    background: #7fecad;
                    font-size: 13px;
                    text-align: left;
                    font-weight: bold;
                    color: #71790c;
                    margin-bottom: 12px;
                    border-bottom: solid 1px #efefef;
                }
            dd{
                font-size: 0.78em;
                height: 1.5em;
                width: 220px;
                padding:2px 2px 2px 18px;
                margin:2px 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <dl>
            <dt>體育新聞</dt>
            <dd>亞運會在韓國港口城市仁川開幕，韓國總統朴槿惠出席</dd>
            <dd>在亞運會首日，韓國軍團佔據獎牌榜第一位</dd>
            <dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
            <dd>亞運會在韓國港口城市仁川開幕，韓國總統朴槿惠出席</dd>
            <dd>在亞運會首日，韓國軍團佔據獎牌榜第一位</dd>
            <dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
        </dl>
    </body>
</html>

效果：
在這裡插入圖片描述

相關文章