Tony学前端（九）：文本到底有多少秘密？

本文共有2800字，预计阅读时间：15分钟

在文章末尾可以观看本课的视频

首先照例我们先复习一下上次都讲了哪些：

CSS基本概念：

什么是CSS、层叠是什么意思、为什么要用CSS。

CSS深入：

CSS定义、语法、选择器、创建。

CSS背景：

CSS背景颜色、背景图片。

在学习HTML时，我们曾经学习过文本的格式化，已经接触了部分CSS文本属性。今天我们就更深入的完整学习一下，看看CSS有哪些文本属性。

首先是控制文本水平对齐的text-align属性。

text-align属性会影响一个元素中的文本的水平对齐方式。要注意的有两点：

1、影响的是水平对齐方式，不涉及到垂直对齐方式。

2、影响的是元素内的文本，或者是其内部的行内元素，而对于元素内的块级元素则无效果。

text-align的取值包括：left、right、center、justify，我们来分别看一下效果：

left为水平左对齐，也是默认对齐方式：

right为水平右对齐：

center为居中对齐：

justify为两端对齐：

对于justify需要注意的是必须文本的长度达到或超过了容器的宽度（通俗的说就是发生了换行）才能有两端对齐的效果，否则还是左对齐。譬如以上示例，如果内容仅仅是“Hello world”的话，由于文字太少，那么即使设置了text-align:justify，其依然还是会左对齐。

思考一个问题，如果是行内元素，那么text-align属性是否有效？

接下来是控制文本缩进的text-indent属性。

我们写作文，段落的第一行总是要空两格，这个就是缩进，就像这样：

要实现缩进效果，如果用打空格的方式来解决的话，那就太落伍了，CSS中有专门针对文本缩进的属性text-indent，该属性可以取正值，此时文本向右缩进；也可以取负值，此时首行文本向左伸出，感觉就像是悬浮效果。

默认text-indent的值为0，不缩进：

设置为正值（text-indent:100px）：

设置为负值（text-indent:-100px）:

首行悬在余下部分之上

text-indent的单位可以是我们很熟悉的px，也可以是暂时还很陌生的em，另外也可以是百分数：

text-indent:100px

text-indent:3em

text-indent:20%

要注意的是，如果设置为百分数，那么元素缩进值是相对于父元素宽度的！

如以上代码，

标签的文字实际上是缩进100px（500px*20%），而不是200px。

另外text-indent是继承父元素的：

以上代码中的

标签的文字缩进继承父元素的设置，也是缩进100px。

最后一点要注意行内元素是不能设置缩进的！

接下来谈谈字间距与词间距。

先来说说什么是字间距？什么又是词间距？

字间距就是单个字母（英文）或者汉字（中文）之间的间隔，而词间距是单词（英文）或者空格隔开的连续文字（中文）之间的间隔。由于汉字的书写一般不会出现空格，因此词间距对于中文来说使用的不多。

英文字间距与词间距：

中文字间距与词间距：

字间距的属性名为letter-spacing，而词间距的属性名为word-spacing。两个属性均可以取正值或负值。

字间距与词间距均为默认值：

词间距为20px与默认值的比较：

字间距为20px与默认值的比较：

词间距为-20px与默认值的比较：

字间距为-20px与默认值的比较：

下面一个属性比较简单，控制文字大小写的转换。

控制字符大小写装换的属性是text-transform。该属性有三个取值：

uppercase：字符全部转换为大写。

lowercase：字符全部转换为小写。

capitalize：每个单词的首字母转换为大写。

很明显，该属性对中文无效。

接下来的属性实际上我们之间已经接触过，文本的划线装饰。

text-decoration属性可以对文本进行划线装饰，其实我们已经在HTML第二讲中的文本常用属性中讲过了，我们再来学习一下。

text-decoration的取值可以有none、underline、overline、line-through以及blink。

text-decoration的默认值是none，此时文本无划线。

如果设置为underline，则文本下方显示下划线：

设置为overline，文本上方显示上划线：

设置为line-through，文本中间显示中划线：

中划线一般在电商网站中的原价显示中应用：

text-decoration还有一个属性值为blink，本意是让文本闪烁，但是现在没有任何一个浏览器支持这个效果，因此blink只能默默的打酱油。

text-decoration属性支持多值特性，多个值用空格隔开。也就是说我们可以同时显示上划线与下划线，只要这样设置：

接下来我们谈谈文本中的空白。

之前的HTML中我们曾学习过空格的表示方法，也曾利用

标签来保留文本段落中的空白。而在CSS中white-space属性可以更灵活的来处理空白。

我们先谈谈空白，在页面的文本中有三种情况会出现空白：

1、文本中的空格。

2、文本中的换行。

3、当文本过长而引起的自动换行。

为了更灵活的处理以上三种情况，white-space可以设置多个值来处理不同的场景，我们先看以下一段代码：

在这段代码中，

标签里的内容有连续的空格，有换行，另外该文本也有可能会发生自动换行（当浏览器宽度较小时）。

white-spacing属性的取值有normal、pre-line、nowrap、pre以及pre-wrap，接下来我们对这些属性值分别做演示。

white-sapcing属性的默认值是normal，根据之前学习过的知识，我们知道在默认情况下连续的空格会合并成一个空格，另外代码里书写的换行也会被忽略，此时文本过长将会导致自动换行，因此看上去是这个效果：

如果white-spacing设置为pre-line，则空格依旧被合并，自动换行也有效，但是代码中的换行会被保留，因此之前的代码就是这个效果了：

接下来设置为nowrap，则空格被合并，代码中的换行会被忽略，同时自动换行也不允许，整个文本就是长长的一行：

设置为pre，则空格被保留，代码中的换行也被保留，但是自动换行不允许，于是就显示为这样：

最后设置为pre-wrap，空格被保留，代码中的换行也保留，自动换行也允许，效果如下：

我们做个总结：

在之前学习HTML时我们已经学习过了一些文本相关的CSS，这里再汇总回顾一下！

后面暂时没有了，今天我们其实就学习了一个东西：

文本：

对齐

缩进

间距

大小写

划线

空白

通过今天的学习以及之前掌握的知识，我们足可以应对网页中对于文本的绝大多数的样式要求。下一节我们将学习“盒子模型”，这是CSS中非常重要的一个概念，而我们将从一个国王建城堡的故事开始说起！娃娃们加油，我们的目标是星辰大海！！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：