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

来源：互联网发布：淘宝韩式褶皱斑马帘编辑：程序博客网时间：2024/06/05 18:34

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>

这里写图片描述

欢迎持续访问博客

阅读全文

1 0