CSS文本属性可以定义文本的样式。
通过文本属性，您可以改变文本的颜色、字符间距，对其文本，装饰文本，对文本缩进等等。
文本缩进
把web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p { text-indent: 5em; }
注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。
那如何对行内元素缩进呢？可以用左边距或外边距创造这种效果。
使用负值
text-inent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {
text-indent: -5em;
}
不过在为text-indent设置负值的时候要小心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {
text-indent: -5em;
padding-left: 5em;
}
使用百分比值
text-indent可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在这个例子中，缩进值是父元素的20%，即100px:
div { width: 500px; }
p { text-indent: 20%; }
<div>
<p>this is a paragragh</p>
</div>
继承
text-indent属性可以继承：
<style>
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
</style>
<div id="outer">
<div id="inner">
<p>this is a paragragh.</p>
</div>
</div>
水平对齐
text-align是一个基本的属性，它规定了元素中文本的水平对其方式。
text-align使用规则:
· 只在块元素中使用，直接用在内联元素上不生效；
· 会对块元素中的所有内联元素对齐；
· 会对块元素中包含的文本内容生效；
· 在其内的块元素也会对齐是因为子块元素继承父块元素的text-align属性；
可能的值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对其文本效果。 |
| inherit | 规定应该从父元素继承text-align属性的值。 |
值 justify
实现原理：（引用张鑫旭）
要理解原理，我们首先要搞清楚文本的两端对其声明text-align：justify;起作用的本质。首先，大家都知道，text-align：justify是专门为英文设计的，用来实现英文语句的两端对齐。注意这里的，是语句的对齐。大家都应该知道，英文语句是一个一个单词组成的，每个单词之间使用空格分隔。
text-align：justify之所以可以让英文段落两端对齐，那是因为每个英文单词之前那个透明看不见的空格被拉伸了。因此，当我们写下一段洋洋洒洒的中文的时候，text-align：justify是没有任何作用的。跟没有设置是没有任何区别的，为什么呢？因为中文是一个一个汉字，汉字之间是没有空格的，自然也就不能拉伸，所以也就不能两端对齐。
怎么办呢?难道中文就不行了吗？
当然不是！既然正常的中文文字之间没有空格，我们自己加一点不就好了。例如下面代码：
"左某人小鲜肉".split("").join(" ");
结果：
"左 某 人 小 鲜 肉"
会发现，每个中文文字之间都有空格字符，于是text-align:justify就能大发神威，实现两端对齐。
虽然我们实现了两端对齐，但是，空格字符它也是真实存在的字符，是会占据宽度的。如果放任不管，文字就会显得很稀松，阅读会很吃力，在测试眼里就是个bug，怎么办呢？
很简单，我们使用letter-spacing收缩字符间距就可以了。
text_box.style.letterSpacing = '-.15em';
不同字体的letter-spacing负值不一样，使用em单位，可以更智能适配各个字体的文字。
至此，我们想要的效果就可以实现了：
box.style.textAlign = 'justify';
text_box.style.letterSpacing = '-.15em';
text_box.innerHTML = text_box.innerHTML.split("").join(" ");
上面的方法适用于中文内容，如果段落含有英文片段，会干掉原来的空格，因为三个空格会被当做一个空格距离来处理，因此，我们还需要对连续三个空格做下特殊处理，代码进化成：
text_box.innerHTML = text_box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ");
字间隔
word-spacing属性可以改变字(单词)之间的标准间隔。其默认值normal与设置值为0是一样的。
word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把它拉近：
<style>
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
注意：中文文字下，word-spacing属性是没有效果的。
字母间隔
letter-spacing属性可以设置字母之间的间隔
与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认值是normal(这与letter-spacing: 0相同)。输入的长度值会使字母之间的间隔增加或减少指定的量：
<style>
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
text-transform属性处理文本的大小写。这个属性有5个值：
| 值 | 描述 |
|---|---|
| none | 默认值。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承text-transform属性的值。 |
使用text-transform有两方面的好处。首先，只需要一个简单的规则来完成这个修改，而无需修改元素本身。其次，如果以后决定将所有大小写再切换为原来的大小写，可以更容易的完成修改。
文本装饰
text-decoration属性规定添加到文本的装饰。这个属性允许对文本设置某种效果，比如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延申”到后代元素中。
任何版本的IE浏览器（包括IE8）都不支持属性值inherit。
IE,Chrome或Safari不支持blink属性值。
| 值 | 描述 |
|---|---|
| none | 默认值。定义标准的文本。 |
| underline | 下划线。 |
| overline | 上划线。 |
| line-through | 删除线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承text-decoration属性的值。 |
none值会关闭原本应用到元素上的任何装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果希望去掉超链接的下划线，可以这样做到：
a { text-decoration: none; }
处理空白符
white-space会影响到对源文档中空格、换行和tab字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many
spaces in it.</p>
可以用以下声明显示地设置这种默认行为：
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
可能的值
| 值 | 描述 |
|---|---|
| normal | 默认值。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 |
| nowrap | 文本不会换行，文本会在同一行上继续，知道遇到<br>标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inderit | 规定应该从父元素继承 white-space属性的值。 |
所有浏览器都支持white-spacing属性。任何版本地IE浏览器都不支持属性值"inherit"。
总结
| 值 | 空白符 | 换行符 | 自动换行 |
|---|---|---|---|
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 保留 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 | 允许 |
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction属性规定块级元素中文本地方向/书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。
网友评论