《
CSS3网页制作实例 content属性的综合用法》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332442013.htm
平时博客等常常会有文章摘要，将文字截断后直接应用省略号表现文章还不停止，如下所示：
Tag：综合 用法 属性
网页制作 实例
在从前我们可以通过后端服务器程序截取或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>
<,CSS3简单实例分析学习;head>
<meta charset="gb2312">
,css3教程：弹性盒模型; <title>CSS3教程网页内容处置-插入文字 | 网页教养网(poluoluo.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
,CSS3教程 使css3的属性在ie中正常显示; body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
,CSS3教程 Transform-变形处理; p{height:30px; line-height:30px;}
,CSS3教程 pointer-events属性值详解; p:before{content:"网页教学网(poluoluo.com)!";}
,CSS3教程 overflow属性超过一行显示省略号; div:after{content:"网页教学网提供最新的网页制作、网页设计、网页殊效，为个人网站提供网页素材模板和网页视频学习！";}
#box1:after{content:"..."}
#box2:after{content:none;}
</style>
</head>
<,CSS3教程 box-sizing属性;body>
,CSS3改变文本选中的默认颜色; <p>【原有的文字】</p>
<div>【原有的文字】</div>
,CSS3布局 灵活的盒子模型; <div id="box1">【原有的文字，这个将演示省略号】</div>
<,CSS3属性之text-shadow详解;div id="box2">【原有的文字】</div>
</body>
</html>
--> [
网站建设之]CSS3网页制造实例:content属性的综合用法
(责任编辑：网站建设)
CSS3网页制作实例 content属性的综合用法相关文章