CSS文本

text-align水平对齐方式

常用取值如下

• left: 左对齐

• right：右对齐

• center：居中对齐

• justify：两端对齐
  

<p style="text-align: center">居中对齐</p>
<p style="text-align: left">居左对齐</p>
<p style="text-align: right">居中对齐</p>
<p style="text-align: justify">两端对齐</p>

letter-spacing/word-spacing 字母／字间距

• letter-spacing设置每个字母之间的间距，英文字母／1个汉字

• word－spacing 设置每个字之间的间距

• CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。一个汉字并不是一个字
  

<p style="letter-spacing: 10px;">hello css hello world</p>
<p style="word-spacing: 10px;">hello css hello world</p>


<p style="letter-spacing: 10px;">汉字的字母间距</p>
<p style="word-spacing: 50px;">汉字的字间距 汉字的字间距</p>

尝试一下》

text-indent首行缩进

• 缩进可以是正值也可以是负值
  

p{
    text-indent: 20px;
}

尝试一下》

text-transform字符转换

• lowercase：转换为小写字母

• uppercase：转换为大写字母

• capitalize：只有每个单词的首字母大写

<p style="text-transform: lowercase">AbCdEfG</p>
<p style="text-transform: uppercase">AbCdEfG</p>
<p style="text-transform: capitalize">abcdefg  abcdefg</p>

尝试一下》

text-decoration文本装饰  

常用取值如下：

• underline：下划线

• overline：上划线

• line-through：中间划线

• none：没有划线，经常用来去掉超链接的默认下划线

<p style="text-decoration: underline">我有下划线</p>
<p style="text-decoration:overline ">我有上划线</p>
<p style="text-decoration: line-through">我被删了</p>

<a href="#">我默认有下划线</a>
<a href="#" style="text-decoration: none">我默认有下划线</a>

尝试一下》

white-space处理空白符

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行。

常用取值如下

• normal：上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。当文本超过父元素宽度时会自动换行

p{
    white-space: normal;
}

尝试一下》

• pre:浏览器将会保留额外的空格，甚至回车，即使超出父元素宽度也不换行

尝试一下》

• nowrap:它会防止元素中的文本换行，除非使用了一个 br 元素，多个空格会被合并为一个

• pre-wrap：保留空格和换行符，允许自动换行

• pre-line：合并空格，保留换行符，允许自动换行