CSS3每日一练之内容处理-插入文字

最新推荐文章于 2023-07-09 16:56:03 发布

jqrsdsy

最新推荐文章于 2023-07-09 16:56:03 发布

阅读量2.8k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在过去我们可以通过后端服务器程序截取或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>

jqrsdsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3每日一练之内容处理-插入文字

在过去我们可以通过后端服务器程序截取或JS截取文字后加入省略号即可。现在，我们的CSS3.0可以使用实现了!content属性：　　如果我们想往段落p标签内部追加省略号只需要如下方式定义样式即可：　　p:after{content:"...";}　　当然我们也可以追加任何文字：　　p:after{content:"前端开发网";}　　既然CSS3可以追加内容
复制链接

扫一扫