zoukankan      html  css  js  c++  java
  • 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值(none值只能用于before和after这两种选择器)或normal(任何选择器都没问题)值即可:
      #box:before{content:none;}


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


    现在我们来看一下content属性的综合用法:

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gb2312">
            <title>CSS3每日一练之内容处理-插入文字 | 前端开发网(W3Cfuns.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:"前端开发网(W3Cfuns.com)!";}
                div:after{content:"W3CSchool,web前端开发起飞区,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>
  • 相关阅读:
    POJ 2991 Crane(线段树)
    HDU 1496 Equations(哈希表)
    POJ 2785 4 Values whose Sum is 0(哈希表)
    挑战程序设计竞赛 3.2 常用技巧精选(一)
    AOJ 0531:Paint Color(二维离散+imos)
    POJ 2549:Subsets(哈希表)
    POJ 3977:Subset(折半枚举+二分)
    CodeForces 148D Bag of mice
    POJ 2151 Check the difficulty of problems
    HDU 3853 LOOPS
  • 原文地址:https://www.cnblogs.com/wzzl/p/4900839.html
Copyright © 2011-2022 走看看