CSS文本格式处理（水平、垂直对本+文本修饰、缩进+文本添加阴影+大小写转换+文本字符间距、空格间距+设置元素换行符）

目录

7.水平对齐文本 text-align

8.垂直对齐文本 vertical-align

9.指定文本修饰text-decoration

10.文本缩进 text-indent

11.文本添加阴影text-shadow：x y r red ;

12.大小写转换 text-transfrom

13.文本中字符之间的距离 letter-spacing

14.文本中单词之间的空格 word-spacing

15.设置元素的换行符 white-space

---

7.水平对齐文本 text-align

默认情况下，文字左对齐。

实际开发中，我们会根据需要，常用的水平对齐的值有如下几个：

left、right、center、justify

其中需要说明的是，justify使用时，每一行都被拉伸，使得每一行都具有形同的宽度，适用于报纸与杂志。

8.垂直对齐文本 vertical-align

常用的值有以下几个：

top、middle、bottom

9.指定文本修饰text-decoration

常用的值有以下几个：

none	默认值，正常显示文本
inherit	继承父元素特性
overline	从文本上方绘制水平线
underline	从文本下方绘制水平线
line-through	在文本中绘制水平线 （划掉线）同html的<s>标签

 

 

 

 

 

10.文本缩进 text-indent

指定文本的第一行开始之前应该留下多少水平空间。

属性值可以是：

px、pt、cm、em、%、inherit

像素单位、点（字体单位：1点=0.376mm、厘米、相对单位、百分比、继承。

11.文本添加阴影text-shadow：x y r red ;

如需添加多个阴影，需要用逗号隔开，

text-shadow:1px 2px 3px red;

/*
  1px: 水平距离   x坐标
  2px: 垂直坐标   y坐标
  3px:  定义阴影模糊半径
  red:  定义阴影的颜色

*/

12.大小写转换 text-transfrom

取值有四种：

• capitalize 每个单词首字母均大写
• uppercase 所有字母君大写
• none 正常显示
• lowercase 所有字母均小写

13.文本中字符之间的距离 letter-spacing

常见取值：

• normal 默认样式，字符之间没有额外的距离
• length 单位表示： px、pt、cm、mm等 设置字符之间的距离(可取负值减小距离)
• inherit 继承父元素的特性

14.文本中单词之间的空格 word-spacing

取值和letter-spacing 一样。

15.设置元素的换行符 white-space

参数为

• normal
• inherit 
• nowrap屏蔽元素中所有的换行符

另外，需要区分的三种取值

• pre 文本支持所有的换行和空格
• pre-line 文本支持换行 忽略额外的空格
• pre-wrap 文本将在必要的时候或者行的结尾进行换行。