CSS 文本样式

关于浏览器支持：若未特别标明则主流浏览器都支持，其中以作为重点关注（IE8以下不考虑）。

属性	描述	版本
color	设置文本的颜色	CSS1
direction	规定文本的方向/书写方向	CSS2
unicode-bidi	配合 direction 属性使用设置文本方向	CSS2
text-align	规定文本的水平对齐方式	CSS1
text-justify	规定当text-align设置为"justify"时所使用的对齐方法	CSS3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行	CSS3
text-transform	控制文本的大小写	CSS1
text-indent	规定文本块首行的缩进	CSS1
letter-spacing	设置字符间距	CSS1
word-spacing	设置单词间距	CSS1
line-height	设置行高	CSS1
text-decoration	规定添加到文本的装饰效果	CSS1
text-shadow	向文本添加阴影	CSS3
white-space	规定如何处理元素中的空白	CSS1
text-overflow	规定当文本溢出包含元素时发生的事情	CSS3
word-break	规定非中日韩文本的换行规则	CSS3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行	CSS3

目前各主流浏览器都还未支持的 CSS3 文本相关属性有：text-wrap，punctuation-trim，hanging-punctuation，text-emphasis

color

color 属性设置文本的颜色。

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）
rgba_number	规定颜色值为 rgba 代码的颜色（比如 rgb(255,0,0,0.5)）

color: red;
color: #666666;
color: rab(111,111,111);
color: rabg(111,111,111,0.8);
color: inherit;

direction

direction 属性规定文本的方向/书写方向。

值	描述
ltr	默认，文本方向从左到右
rtl	文本方向从右到左。

例：设置文字方向从右往左

<style>
div{ 
	border:1px solid #eee; 
	padding:3px;
}
.div1{
    text-align: right;
}
.div2{
    direction:rtl;
}
.div3{
    direction:rtl;
    unicode-bidi: bidi-override; 
}
</style>
<div>举办者（个人/单位）</div>
<div class="div1">举办者（个人/单位）</div>
<div class="div2">举办者（个人/单位）</div>
<div class="div3">举办者（个人/单位）</div>

显示结果：

提示：含有符号时会出现符号排序错乱。

使用场景1：设置表单元素select

<style>
  select{ direction:rtl; width:200px;}
  option{ direction:ltr; }
</style>
<select>
  <option>举办者（个人）</option>
  <option>举办者（单位）</option>
</select>

显示结果：

unicode-bidi

unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。

值	描述
normal	默认。不使用附加的嵌入层面。
embed	创建一个附加的嵌入层面。
bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。

div{
  direction:rtl;
  unicode-bidi:bidi-override;
}

text-align

text-align 属性规定文本的水平对齐方式。

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

p{text-align:center}
p{text-align:left}
p{text-align:right}

text-justify

CSS3新增 text-justify 属性规定当 text-align 设置为"justify"时所使用的对齐方法 。

值	描述
auto	浏览器决定齐行算法。
none	禁用齐行。
inter-word	增加/减少单词间的间隔。
inter-ideograph	用表意文本来排齐内容。
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida	通过拉伸字符来排齐内容。

注：只有IE浏览器支持该属性。

div{
  text-align:justify;
  text-justify:inter-word;
}

text-align-last

CSS3新增 text-align-last 属性设置如何对齐最后一行或紧挨着强制换行符之前的行 。
text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。

值	描述
auto	默认值。最后一行被调整，并向左对齐。
left	最后一行向左对齐。
right	最后一行向右对齐。
center	最后一行居中对齐。
justify	最后一行被调整为两端对齐。
start	最后一行在行开头对齐。
end	最后一行在行末尾对齐。

例：把段落的最后一行向右对齐

p{
  text-align: justify;
  text-align-last: right;
  -moz-text-align-last: right; }  /* Firefox */
}

text-transform

text-transform 属性控制文本的大小写。

值	描述
none	默认。标准的文本。
capitalize	单词以大写字母开头。
uppercase	字母大写。
lowercase	字母小写。

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
h3 {text-transform:lowercase;}

text-indent

text-indent 属性规定文本块首行的缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。

text-indent:50px;  /*首行缩进50像素*/
text-indent:2em;   /*首行缩进个字符*/
text-indent:2%;    /*首行缩父元素宽度的2%*/

letter-spacing

letter-spacing 属性设置字符间距。

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。

letter-spacing: 5px;

word-spacing

word-spacing 属性设置单词间距。

值	描述
normal	默认。单词标准间距。
length	定义单词间的固定空间。

word-spacing:10px;

line-height

line-height 属性设置行高。

值	描述
normal	默认值。
number	设置数字，行高为此数字与当前的字体尺寸乘积。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

line-height:2;
line-height:40px;
line-height:200%

text-decoration

text-decoration 属性规定添加到文本的装饰效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。

text-decoration 属性是以下三种属性的简写：
text-decoration-line
text-decoration-color
text-decoration-style

text-decoration: none;                 /*没有文本装饰*/
text-decoration: underline red;        /*红色下划线*/
text-decoration: underline wavy red;   /*红色波浪形下划线*/

text-shadow

text-shadow 属性向文本添加阴影。
语法：text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

  text-shadow: 2px 2px;  /*默认字体颜色*/
  text-shadow: 2px 2px red;
  text-shadow: 5px 5px 5px green;

设置多个阴影时使用逗号隔开：

div{
  text-shadow:2px 2px red,5px 5px 5px green;
}

white-space

white-space 属性规定如何处理元素中的空白。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。

white-space: nowrap;

text-overflow

text-overflow 属性设置文本溢出时样式。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

text-overflow: ellipsis;

word-break

word-break 属性规定非中日韩文本的换行规则。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

word-break:break-all;

word-wrap

word-wrap 属性允许对长的不可分割的单词进行分割并换行到下一行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

word-wrap:break-word;