CSS3網頁制作實例:content屬性的綜合用法

2024-07-11 09:02:09

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：在過去我們可以通過后端服務器程序截取或JS截取文字后加入省略號即可?，F在，我們的CSS3.0可以使用實現了!

　平時博客等經常會有文章摘要，將文字截斷后直接使用省略號表示文章還沒有結束，如下所示：

在人際關系中，良好的第一印象是非常重要的，人們愿意在彼此身上尋求信任與誠實，并期望在接下來的經歷中重現和增強這些好感。同樣的道理也體現在移動應用或互聯網產品中。在打造良好的品牌信譽及其與終端用戶之間持 ......

在過去我們可以通過后端服務器程序截取或JS截取文字后加入省略號即可。現在，我們的CSS3.0可以使用實現了!

content屬性：
　　如果我們想往段落p標簽內部追加省略號只需要如下方式定義樣式即可：
　　p:after{content:"...";}

　　當然我們也可以追加任何文字：
　　p:after{content:"網頁教學網";}

　　既然CSS3可以追加內容after，那么CSS3也為我們提供了前置內容的方法before：
　　p:before{content:"...";}

　　如果我們使用標簽選擇器定義了所有的p，但是又有需求要求某一個p且ID為box的元素不準自動追加或前置內容，那么我們就可以對content屬性制定none值（none值只能用于before和after這兩種選擇器）或normal（任何選擇器都沒問題）值即可：
　　#box:before{content:none;}

總結：content屬性主要通過偽類選擇器:before和:after來指定位置；
content屬性的值可以為任何內容；
當content屬性的值為none，則表示不插入任何內容；

現在我們來看一下content屬性的綜合用法：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3教程網頁內容處理-插入文字 | 網頁教學網(Webjx.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
            p{height:30px; line-height:30px;}
            p:before{content:"網頁教學網(Webjx.com)!";}
            div:after{content:"網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習！";}
            #box1:after{content:"..."}
            #box2:after{content:none;}
        </style>
    </head>

    <body>
        <p>【原有的文字】</p>
        <div>【原有的文字】</div>
        <div id="box1">【原有的文字，這個將演示省略號】</div>
        <div id="box2">【原有的文字】</div>
    </body>
</html>