H5学习笔记之css3新增文本属性

一、复习以前的属性
white-space：对象内空格的处理方式
direction：文本流的方向
unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
1、
white-space：对象内空格的处理方式
nowrap 控制文本不换行
pre 空白会被浏览器保留，不换行
pre-line 合并空白 正常换行 不留空白
pre-wrap 保留空白 正常换行
normal 回到默认值
2、
direction：文本流的方向
ltr 文本从左向右
rtl 文本从右往左
与direction属性一起使用的属性，unicode-bidi：bidi-override；文本流从右到左时候，也需要改变文本的方向
如：
二、css3新增属性
text-overflow:是否使用一个省略标记（…）标示对象内文本的溢出
text-align:文本的对齐方式
text-transform:文字的大小写
text-decoration:文本的装饰线，复合属性
text-shadow:文本阴影
text-fill-color:文字填充颜色
text-stroke:复合属性。设置文字的描边
tab-size:制表符的长度
word-wrap:当前行超过指定容器的边界时是否断开转行

    1、 text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出
            clip： 默认值 无省略号
         ellipsis：当对象内文本溢出时显示省略标记（...）。
         该属性需配合over-flow:hidden属性(超出处理)还有	white-space:nowrap(禁止换行)配合使用，否则无法看到效果
         效果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20190818130920928.PNG)

2、
text-align:文本的对齐方式
left:默认值 左对齐
right:右对齐
center:居中
justify： 两边对齐。
start:开始边界对齐，与left相似
end:结束边界对齐，与right相似

3、
text-transform:文字的大小写
none： 默认值 无转换
capitalize： 将每个单词的第一个字母转换成大写
uppercase： 转换成大写
lowercase： 转换成小写

4、
text-decoration:文本的装饰线，复合属性

text-decoration-line ：指定文本装饰的种类，上划线或者下划线或者其他，相当于CSS1时的text-decoration属性
text-decoration-style ：指定文本装饰的样式。
text-decoration-color：指定文本装饰的颜色。
blink： 指定文字的装饰是闪烁。  仅opera和firefox	
text-decoration : #F00 double overline   CSS3实例
text-fill-color:   文本填充颜色 作用类似color
以下各种浏览器所兼容的属性  text-fill-color:red;
	    -webkit-text-fill-color:red;/*谷歌  苹果  猎豹 360极速*/
		-moz-text-fill-color:red;/*火狐浏览器还不兼容*/
		-ms-text-fill-color:red;/*IE浏览器 QQ  360 搜狗 百度*/
		-o-text-fill-color:red;/*欧鹏浏览器*/

5、text-shadow:文本阴影
取值：x y blur color,…
x 横向偏移
y 纵向偏移
blur 模糊距离(灰度)
color 阴影颜色
如：立体文字

   		body{
		background:#000
	    }
	    p.p1{	
		color:#fff;
		font:100px/100px "微软雅黑";/*字体：字体大小/行高*/
		text-align:center;/*左右居中*/
		text-shadow:0 1px 0 #ccc,0 2px 0 #9c9c9c,0 3px 0 #bbb,0 4px 0 #9b9b9b,0 5px 0 #aaa;    //加了5层阴影
	    }

6、
text-stroke:复合属性。设置文字的描边,相当于文字的border
text-stroke-width:文字的描边厚度
text-stroke-color:文字的描边颜色

tab-size:制表符的长度 默认值为8(一个tab键的空格字节长度)，在 pre标签之内才会有显示，意思就是设置一个tab空格的大小

word-wrap:当前行超过指定容器的边界时是否断开转行
normal： 默认值
允许内容顶开或溢出指定的容器边界。
break-word：
内容将在边界内换行。如果需要，单词内部允许断行。