您的位置：首页 > Web前端 > CSS

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

2017-10-14 11:00 966 查看

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>




欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3文本属性 direction 文字阴影 text-shado 文字属性
相关文章推荐
新的分享
章节导航