CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-插入文字

CSS3每日一练之选择器-插入文字

          平时博客等经常会有文章摘要,将文字截断后直接使用省略号表示文章还没有结束,如下所示:
在人际关系中,良好的第一印象是非常重要的,人们愿意在彼此身上寻求信任与诚实,并期望在接下来的经历中重现和增强这些好感。同样的道理也体现在移动应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间持 ......

         在过去我们可以通过后端服务器程序截取或JS截取文字后加入省略号即可。现在,我们的CSS3.0可以使用实现了!


content属性:
  如果我们想往段落p标签内部追加省略号只需要如下方式定义样式即可:
  p:after{content:"...";}

  当然我们也可以追加任何文字:
  p:after{content:"前端开发网";}

  既然CSS3可以追加内容after,那么CSS3也为我们提供了前置内容的方法before:
  p:before{content:"...";}

  如果我们使用标签选择器定义了所有的p,但是又有需求要求某一个p且ID为box的元素不准自动追加或前置内容,那么我们就可以对content属性制定none值即可:
  #box:before{content:none;}


总结:content属性主要通过伪类选择器:before和:after来指定位置;
          content属性的值可以为任何内容;
          当content属性的值为none,则表示不插入任何内容;


现在我们来看一下content属性的综合用法:
复制代码运行代码编辑代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-插入文字 | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
  9.             p{height:30px; line-height:30px;}
  10.             p:before{content:"前端开发网(W3Cfuns.com)!";}
  11.             div:after{content:"W3CSchool,web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!";}
  12.             #box1:after{content:"..."}
  13.             #box2:after{content:none;}
  14.         </style>
  15.     </head>
  16.    
  17.     <body>
  18.         <p>【原有的文字】</p>
  19.         <div>【原有的文字】</div>
  20.         <div id="box1">【原有的文字,这个将演示省略号】</div>
  21.         <div id="box2">【原有的文字】</div>
  22.     </body>
  23. </html>

【CSS3每日一练之选择器-插入文字】相关文章

1. CSS3每日一练之选择器-插入文字

2. CSS3每日一练之选择器-结构性伪类选择器[三]

3. CSS3每日一练之选择器-结构性伪类选择器[二]

4. CSS3每日一练之选择器-兄弟元素选择器

5. CSS3每日一练之选择器-结构性伪类选择器[一]

6. CSS3每日一练之选择器-状态伪类选择器[五]

7. CSS3每日一练之选择器-属性选择器

8. CSS3每日一练之选择器-状态伪类选择器[四]

9. CSS3每日一练之选择器-状态伪类选择器[三]

10. CSS3每日一练之选择器-状态伪类选择器[二]

本文来源:https://www.51html5.com/a854.html

点击展开全部

﹝CSS3每日一练之选择器-插入文字﹞相关内容

「CSS3每日一练之选择器-插入文字」相关专题

其它栏目

也许您还喜欢