在過去我們可以通過後端服務器程序截取或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每日一練之內容處理-插入文字!</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:"網頁教學網(W3Cfuns.com)!";}
div:after{content:"poluoluoCOM,網頁教學網開發起飛區,Web前端開發高手聚集地,教程、資源完全免費!";}
#box1:after{content:"..."}
#box2:after{content:none;}
</style>
</head>
<body>
<p>【原有的文字】</p>
<div>【原有的文字】</div>
<div id="box1">【原有的文字,這個將演示省略號】</div>
<div id="box2">【原有的文字】</div>
</body>
</html>