文本常规设置

文本常规设置

缩进设置

text-indent

全部浏览器都支持 text-indent 属性。IE不支持属性值"inherit"

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

注释：容许使用负值。若是使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 以前，text-indent 老是继承计算值，而不是声明值。

取值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

文本对齐方式

text-align

全部浏览器都支持 text-align 属性。IE不支持属性值"inherit"

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

该属性经过指定行框与哪一个点对齐，从而设置块级元素内文本的水平对齐方式。经过容许用户代理调整行内容中字母和字之间的间隔，能够支持值 justify；不一样用户代理可能会获得不一样的结果。

取值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

值 justify

最后一个水平对齐属性是 justify，它会带来本身的一些问题。

值 justify 可使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。而后，调整单词和字母间的间隔，使各行的长度刚好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。不过在 CSS 中，还须要多作些考虑。

要由用户代理（而不是 CSS）来肯定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增长额外的空间，而另一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，若是 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增长或减小字符间的空间”）。还有一些用户代理可能会减小某些行的空间，使文本挤得更紧密。全部这些作法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

CSS 也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，因为 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。所以，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以致于每行只能放下几个单词。固然，使用窄设计元素是能够的，不过要小心相应的缺点。

注1：CSS 中没有说明如何处理连字符，由于不一样的语言有不一样的连字符规则。规范没有尝试去调和这样一些极可能不完备的规则，而是干脆不提这个问题。

文本换行

white-space、word-break、word-wrap

全部浏览器都支持 white-space、word-break、word-wrap 属性。IE不支持 white-space 属性值"inherit"

white-space

white-space 属性设置如何处理元素内的空白。

取值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式相似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，可是正常地进行换行。
pre-line	合并空白符序列，可是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

word-break

word-break 属性规定自动换行的处理方法。

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

word-wrap

word-wrap 属性容许长单词或 URL 地址换行到下一行。

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

word-wrap是用来标明是否容许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的天然断句点时产生溢出现象。word-break用来标明怎样进行单词内的断句。

总结

/* 经常使用文本换行格式设置 */
.text{
  white-space: normal;
  word-break: keep-all;
  word-wrap: break-word;
}
/* 经常使用文本禁止换行 */
.text{
  white-space: nowrap;
}
复制代码

字间距

letter-spacing 属性规定字间距

取值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（容许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

文本溢出处理

text-overflow 规定当文本溢出包含元素时发生的事情

取值	描述
clip	隐藏超出文本
ellipsis	显示省略符号来表明超出文本。
string	使用指定字符串代替超出文本