CSS3.0實(shí)例教程:content屬性使用實(shí)例介紹

2024-07-11 08:22:56

字體：大中小

供稿：網(wǎng)友

網(wǎng)頁制作文章簡介：在過去我們可以通過后端服務(wù)器程序截取或JS截取文字后加入省略號即可。

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

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

　　當(dāng)然我們也可以追加任何文字：
　　p:after{content:"前端開發(fā)網(wǎng)";}

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

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

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

現(xiàn)在我們來看一下content屬性的綜合用法：

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="gb2312">

        <title>CSS3每日一練之內(nèi)容處理-插入文字!</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:"網(wǎng)頁教學(xué)網(wǎng)(W3Cfuns.com)!";}

            div:after{content:"WEBJXCOM，網(wǎng)頁教學(xué)網(wǎng)開發(fā)起飛區(qū)，Web前端開發(fā)高手聚集地，教程、資源完全免費(fèi)！";}

            #box1:after{content:"..."}

            #box2:after{content:none;}

        </style>

    </head>


    <body>

        <p>【原有的文字】</p>

        <div>【原有的文字】</div>

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

        <div id="box2">【原有的文字】</div>

    </body>

</html>