从零开始前端学习[32]:css3中新增加的一些文本属性

最新推荐文章于 2023-06-29 19:52:20 发布

^_^ 小小码nong

最新推荐文章于 2023-06-29 19:52:20 发布

阅读量724

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签： css3文本属性 direction 文字阴影 text-shado 文字属性

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78232751

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

css3中新增加的一些文本属性

css中相关的文本属性 css3中增加的一些文本属性

direction文本显示方向

多行超出文本显示省略号

text-shadow字体的阴影设置

text-stroke文字描边

text-fill-color文字的颜色填充

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

css中相关的文本属性

在以前的博客中专门有一节是关于基础文本属性的设置的，可以参考
控制文本显示的样式属性

css3中增加的一些文本属性

direction文本显示方向

direction：rtl；//rtl从右向左，ltr从左向右
unicode-bidi:bidi-override;
PS：两属性须结合使用

多行文本超出显示省略号

以前一行文本超出显示省略号的时候使用的是:

white-space: nowrap; //强制不换行
overflow:hidden;  //超出隐藏
text-overflow: ellipsis; //文本超出显示的样式

而现在则使用以下方式,四个属性时候固定的

display: -webkit-box; /*继承block的属性*/
-webkit-box-orient:vertical;    /*元素垂直显示*/
-webkit-line-clamp:5;   /*设置文本显示的行数*/
overflow：hidden；    （不能使用padding）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{ width: 300px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
        .main div{
          width: 300px;box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center;margin: 10px auto}
        .main .part1 p{direction: rtl;unicode-bidi: bidi-override} /*right to left*/
        .main .part2 p{direction: ltr;unicode-bidi: bidi-override} /*left to right*/
        .main .part3 p{display: -webkit-box; /*继承block的属性*/
          -webkit-box-orient:vertical;  /*元素垂直显示*/
          -webkit-line-clamp:5;     /*设置文本显示的行数*/
          overflow:hidden;} /*文本超出省略*/
  </style>
</head>
<body>
  <div class="main">
    <div class="part1">
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
    <div class="part2">
    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
  </div>
    <div class="part3">
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山,不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山,不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
  </div>
</body>
</html>

显示效果如下所示:

这里写图片描述

text-shadow字体的阴影设置

字体的阴影也就是类似于box-shadow一样的属性，其可以形成各种各样的字体效果

text-shadow：X偏移量 Y偏移量 模糊度 颜色;

常用的:

浮雕例子color:#fff;text-shadow:2px 2px 4px #000;
立体字color:#fff; text-shadow: 0 1px 0 #ccc,0 2px 0 #9c9c9c,0 3px 0 #bbb, 0 4px 0 #9b9b9b,0 5px 0 #aaa;（运用Y轴偏移量）
模糊字text-shadow:0 0 20px blue;

阴影叠加: 先渲染后面的，再渲染前面的（运用模糊度）
text-shadow可以多个复合属性，从内到外依次展示，与多背景类似

text-stroke文字描边

text-stroke:宽 颜色   //描边 加兼容前缀
text-fill-color:颜色  //填充色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{ width: 300px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
        .main div{
          width: 300px;box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center;margin: 10px auto;}
        .main .part1 p{text-shadow:2px 2px 4px #000 } /*浮雕*/
        .main .part2 p{text-shadow: 0 1px 0 #ccc,0 2px
        0 #9c9c9c,0 3px 0 #bbb, 0 4px 0 #9b9b9b,0 5px 0 #aaa;} /*立体字，text-shadow可以向url一样，多背景复合*/
        .main .part3 p{text-shadow: 0 0 20px blue;} /*模糊字*/
        .main .part4 p{ text-shadow:0px 0px 10px #f3c,0px 0px 20px #f39,0px 0px 40px
        #f33,0px 0px 60px #f30;}
        .main .part5 p{-webkit-text-stroke: 1px red;} /*文字描边*/
        .main .part6 p{-webkit-text-fill-color: green;} /*文字填充色*/
  </style>
</head>
<body>
  <div class="main">
    <div class="part1">
      <h3>浮雕效果</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
    <div class="part2">
      <h3>立体字效果</h3>
    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
  </div>
    <div class="part3">
      <h3>模糊字效果</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路,没有比人更高的山</p>
    </div>
    <div class="part4">
      <h3>霓虹灯效果</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路,没有比人更高的山</p>
    </div>
    <div class="part5">
      <h3>文字描边</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路,没有比人更高的山</p>
    </div>
    <div class="part6">
      <h3>文字填充色</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路,没有比人更高的山</p>
    </div>
  </div>
</body>
</html>