CSS-文本属性

文本概述

在上一节中我们讲到过了“CSS字体样式”，而我们这一节中要讲的文本和字体是有所区别的，字体CSS设置主要是围绕文字本身进行，如文字风格、字体粗细、字体大小、字体系列、字体颜色等，就是说无论进行什么样的设置都是围绕单个文字本身的样式进行设置的，并不会影响到文本的整体布局（“font”组合值写法中的“行高”除外），这一节中所讲的CSS文本设置是对文本布局方面的知识进行的。

文本水平对齐方式 ”text-align“

该属性用于控制“块元素”或“行内块元素”嵌套的“行内元素”或“行内块元素”的居中方式的。当把“块级元素”作为为被嵌套的内容（即“块级元素”嵌套“块级元素”），不会对该属性生效，但该“块级元素”内部的“行内元素”或“行内块元素”仍然可以继承父级元素中带有的“text-align”属性设置的效果。

它包含以下属性值：

• left（默认）：文本左对齐
• center:文本居中对齐
• right：文本右对齐
• justify：文本两端对齐

HTML代码如下：

 

对应的CSS代码如下：

 

当“text-align”的值为“justify”的时候，还有一个新的属性“text-align-last”可以使用，但是这个属性对“Safari”浏览器和部分主流浏览器的老版本不支持，所以请慎用。它的作用是设置文本中最后一行文本的对齐方式。它的可用属性为（部分浏览器支持较差“start”和“end”属性已移除）：

• auto：浏览器默认行为（默认值）
• left：靠左对齐，在大部分语言下和“auto”的效果基本一致
• center：居中对齐
• right：靠右对齐
• justify：两端对齐

浏览器厂商样式的“属性前缀”产生的原因是，通常当一个样式属性还处于W3C组织的“候选推荐标准”或“建议推荐标准”的时候，浏览器研发组通过开会的形式基本一致地认为该样式属性的实用性很强的时候，那这个品牌的浏览器研发组会提前的开始对W3C提出的这个标准进行开发。当这个样式功能完成后为了凸显自己品牌的优势，亦或是为了防止这个样式属性最终没有成为“推荐标准”，于是他们就会在该属性前方加上一个自己厂商名的“前缀”，作为浏览器的专用样式属性。

我们来大致了解一下W3C每制定一个规范需要经历的5个步骤：

• 第1阶段：工作草案（Working Draft）
  • 工作组依据工作组章程（charter）提出一系列工作草案。公众和W3C会员可以提出评论和问题。工作组必须处理这些反馈。本阶段时长依多种因素而变
• 第2阶段：最终工作草案（Last Call Working Draft）
  • 工作组已完成工作，并要求公众和 W3C 会员提交最后的评论与问题。同样，工作组必须处理这些反馈。如果出现情况，可能要回到工作草案阶段。本阶段时长通常为3周，但也可以更长
• 第3阶段：候选推荐标准（Candidate Recommendation）
  • 当最终工作草案阶段结束，且问题都得到解决后，将进入候选推荐标准（Candidate Recommendation）阶段。 此时可以认为该规范已经稳定，可以展开试验性实施了。工作组必须将实施中得到的反馈整合到规范中。同样，如果出现情况，需返回到工作草案阶段。根据实施进展，本阶段通常持续零到一年
• 第4阶段：建议推荐标准（Proposed Recommendation）
  • 如无意外，规范将进入建议推荐标准（Proposed Recommendation）阶段。在此阶段，W3C总监 (TimBemers-Lee）将正式请求W3C会员审阅这份建议推荐标准。本阶段时长必须不少于4周
• 第5阶段：推荐标准（Recommendation）
  • 据审阅结果，要么W3C总监宣布该规范成为W3C推荐标准（Recommendation），中间可能发生微小改动，要么返回工作草案阶段，或者彻底从W3C工作日程上移去。技术规范一旦成为推荐标准，它就是官方的W3C标准了

文本的垂直对齐方式“vertical-align”

该属性是用于控制文本的垂直对齐方式，它主要的值有：

• baseline（默认）：以文本元素的基线进行对齐
• top：把文本元素的顶端与行中最高的文本元素的顶端对齐（文本元素不一定是字体，以下同理）
• middle：以文本元素的中心点为参照与行内其它文本元素的中心进行对齐
• bottom：把文本元素的底端与行中最低的文本元素的顶端进行对齐
• sub：以文本元素的下标为参照与其它文本元素进行对齐
• super：以文本元素的上标为参照其它文本元素进行对齐
• text-top：把文本元素的顶端与行中最高的字体的顶端进行对齐
• text-bottom：把文本元素的底端与行中最低的字体的顶端进行对齐
• 百分数：使用 "line-height" 属性的百分比值来排列此元素，允许使用负值

该属性在定义文本对齐方式上比较特殊，字面意思上它似乎可以控制一段文本的垂直对齐方式，但它实际上不能对普通的单个元素生效。也就是说这种对齐方式需要“参照物”，即需要至少2个在同一行内的“行内元素”或“行内块元素”才能生效。另外它对表格的单元格<th>和<td>这两个标签可以单独生效（他们的“display”属性为“table-cell”），即一行只有一个单元格也能对“vertical-align”属性生效。

段落首行缩进“text-indent”

该属性是用于设置每个元素首行缩进数量值的属性，CSS字体大小（font-size）可以设置的数值和单位在该属性的值中都可以使用（除了百分比）。如果是用于中文布局，一般会使用“2em”这种数值+单位的形式来为每个段落的首行缩进“两个字符”，这里并不推荐使用“rem”单位，因为段落中可能会存在和正文字体大小不一致的文本（比如说“引用”、“注释”、“注意”等），也就是说缩进“2rem”可能并不是该段文字实际2个字符的宽度。

文本装饰线“text-decoration”

该属性是为文本字符添加一根“装饰线”。在HTML中，带有“href”属性的<a>标签默认带有一根装饰线（表现为下划线），就是因为浏览器会将<a>标签的该属性默认设置为“underline”才如是呈现的。“text-decoration”属性有以下值：

• none（默认）：不显示任何装饰线，或消除已有的装饰线（需要更高权重）
• underline：在文本下方显示装饰线（称作“下划线”），效果如同HTML的<u>标签
• overline：在文本上方显示装饰线（称作“上划线”）
• line-through：在文本中间显示装饰线（称作“删除线”或“中划线”），效果如同HTML的<s>或<del>标签

在CSS3的后续标准中（IE全系列不支持，Edge 18及之前版本不支持），又为该属性提供了4个分支属性，如下：

• text-decoration-line：用于设置装饰线出现的位置，可用值和该属性的主属性完全一致
• text-decoration-style：目前主流浏览器中只有“Safari”浏览器不支持该属性，它用于设置装饰线的类型，可用的值有：

• • solid —— 实线（默认）
  • double —— 双实线
  • dotted —— 点线
  • dashed —— 虚线
  • wavy —— 波浪线
• text-decoration-color：用于设置装饰线的颜色，允许的值为Web常用颜色模式，即颜色英文单词和HEX、RGB、HSL以及带有Alpha通道的以上颜色值
• text-decoration-skip：目前没有浏览器支持该属性。它的作用是当字符和装饰线发生重叠关系的时候，是跳过文字字符，还是直接连在一起穿过去

英文字母大小写转换“text-transform”

该属性能将“行内元素”中的英文文本进行大小写转换，以满足不同类型公司对网站规范的要求。特别在一些对项目或产品细节要求至严的跨国企业或合资企业，他们对网站或应用中的文本格式也有相当高的要求，当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候，如果要逐一去修改这些文本，不仅时间成本大大地增加，也容易出现一些难以一时发现的疏漏，这个时候“text-transform”属性就有它的“用武之地”了。该属性有以下值：

• none（默认）：保持文本中英文单词的默认大小写
• capitalize：将每个英文单词首字母转换为大写字母（对于单个单词而言，如果该单词是全大写字母的，则不发生任何转换）
• uppercase：将所有英文单词转换为大写字母
• lowercase：将所有英文单词转换为小写字母

文本的阴影“text-shadow”

该属性的作用是给文本添加阴影效果。该属性最初是在CSS 2.0中被定义为“推荐标准”的，但在CSS 2.1又被删除了，不知道它到底经历了一些什么，在CSS 3.0中又重新被写进了规范并再次作为“推荐标准”。目前除了IE9及之前版本的浏览器不支持该属性外，其它现代浏览器均支持该属性。

该属性有4个值，具体如下：

• 水平方向阴影偏移（hoff-shadow）：“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。
• 垂直方向阴影偏移（voff-shadow）：“0”表示维持原位，正数为向下偏移，负数为向上偏移。单位为像素“px”。
• 阴影模糊距离（blur）：用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。
• 阴影的颜色（color）：支持Web技术中的常用颜色模式：颜色英文单词和HEX、RGB、HSL以及带有Alpha通道的以上颜色值。

和“行内块元素”和“块元素”所用的“box-shadow”有所不同（该属性位于“CSS盒子模型”这章的“元素的阴影‘box-shadow’”一节内容中），文本阴影的属性值里没有“inset”和“spread”这两个部分（它们的作用分别为“内阴影”和“阴影扩展”），以后在使用中需要加以区分。

段落文本行高“line-height”

该属性是用于设置“行内元素”中的文本字符在一行中所占据的高度，可以使用的值可以是像素值、百分比，或不带单位的浮点数（“1”表示“100%”，“1.5”表示“150%”，以此类推）。

该属性除字面上的意思外，很多时候还有一个小妙用，就是当文本元素只有一行时，可以将该行的文本行高设为和父容器元素高度一致，以此到达文本垂直居中的效果（单行文本甚至可以省略“height”属性，单用“line-height”来替代）。使用场景如：表格单元格、导航按钮、标题栏、表单元素（如：<input>、<select>、<textarea>和<button>。不过这里更建议使用“padding”属性来控制表单元素的高度，这样就不会出现各浏览器对于表单元素的光标大小和位置显示不一致的问题）等。

如上面提到的，利用行高功能可以让单行文字在一个标签容器里在垂直方向上居中，但若是想让多行文字在一个标签容器里居中的话，目前可以考虑的方案有以下几种：

• 如果不考虑标签容器高度需要固定的情况，可以用上下相同的内间距去控制，如“padding-top: 50px; padding-bottom: 50px”或简写为“padding: 50px 0;”（上下50像素，左右0像素）
• 将显示类型设置为表格单元格的类型（display: table-cell），并且将“vertical-align”属性的值设置为“middle”，这种设置方式有几个点需要注意：
  • 该元素的宽度和高度不能设为百分比单位，这和“td”元素不能设置百分比单位一样
  • 若想使用百分比的宽高单位，需将父容器的“display”属性值设置为“table”或“inline-table”（表现得像“inline-block”），然后去调整父级的百分比宽高，前提是父级下只有一个显示类型为“table-cell”子元素
  • 容器元素的宽度可以是固定像素值，但当父级元素的“display”为“table”或“inline-table”且有多个显示类型为“table-cell”子元素容器时，部分容器宽度设置不一定生效
  • 元素高度可以固定，但是当内部的内容过多从而超出设定高度时，元素高度会自动增加
• 标签容器高度固定的情况，将该容器的显示类型设置为弹性盒子模型（display: flex），再将项目对齐方式“align-items”属性的值设置为“center”（该属性只有在“display”的值为“flex”的时候有效）

从常规的“正文文本”设计美观度上来讲，该属性的建议值总在1.4至1.8之间。行高过小会让阅读的视觉疲劳感增加，可读性也较低。行高过大，会让页面正文部分过于空旷，使得页面内容有效区域利用率过低。而对于一些需要展现页面特色并使用了特殊字体的网页而言，可以适当打破这个规则建议。

最后，需要再次提醒注意的是“line-height”可以是“font”的一个隐藏分支属性，也就是说当一个元素在同一个选择器里或更高权重的选择器里使用过“font”组合值的写法，那之前“line-height”属性就会无效化。所以，当需要在和拥有“font”属性同一个选择器里编写行高样式的话，可以直接将行高的值写进“font”属性里，即省略掉“line-height”属性，或者将“line-height”属性放置于“font”之后的行里。如果是不同的选择器，要让“line-height”属性优先生效，那第一种手段就是通过选择器的权重来控制，第二种手段就是为属性值添加上“!important”值，值其权重最大化了。

单词的间距“word-spacing”

该属性用于设置英文单词之间的间距，中文则是设置文本中空格的距离，单位为Web技术的常用度量单位，如“像素（px）”，“字符（em）”，“点（pt）”等，可以为负数。

字符的间距“letter-spacing”

和“word-spacing”有所不同，该属性是用于控制字符间的间距，即无论单词或词语中是否含有空格（该属性对空格字符无效），该属性都会生效，单位同样为Web技术的常用度量单位，同样为可以为负数。

单词自动换行处理“word-break”

该属性用于控制字符以什么样的方式换行。对于西文来说如果单词过长，只要是单词间没有空格符，那浏览是不会对其换行的。我们在浏览器里复制了三段字符，其中第三段是我们故意制造的一个长单词，它们在浏览器里表现如下：

 

对于示例中这样较长的单词就可以用“word-break”属性去进行处理，它主要有以下值：

normal（默认）

使用浏览器默认的换行规则

break-all

允许在单词内换行

keep-all

只能在空格符、中文标点符或连字符（-）处换行

和该属性用法相近的还有一个属性叫做“word-wrap”，除了默认值以外它只有一个可用值“break-word”，它的作用是在长单词或URL地址内部进行换行。看上去它的作用和“word-break: break-all”相似，稍微不同的地方是：当一段句子中出现了较长的单词，并在当前行容纳不下的时候，“word-wrap: break-word”会先尝试将这个单词换在下一行，若下一行仍然容纳不下才会对这整个长单词进行单词内的断行，而“word-break: break-all”则是首先就对这个长单词进行断行，而不会考虑下一行是否能容纳。

空格换行符处理“white-space”

该属性和“word-break”及“word-wrap”不同，从字面意思“white space”（直译为“空白”）上来讲，它是用于处理元素内出现的空格符和换行符的，而不是针对普通字符的。它主要有以下值：

• normal（默认）：由浏览器处理空格符和换行符
• pre：段落里所有的空格符和换行符都会被保留。作用同于<pre>标签
• nowrap：段落内的文本不会换行，已经换行的文本也会强制设为不换行的形式
• pre-wrap：段落里所有的空格符序列和换行符序列都会被保留（除了在某些编码格式下和“pre”有所差距，大多数时候可以说它和“pre”这个值是等价的）
• pre-line：多空格会合并成一个，但换行符会保留

设置文本方向“direction”

该属性是用于控制文本显示方向的，即从左往右，或从右向左。

在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：

• ltr（可以理解为：Left To Right）：默认值,文本方向从左到右
• rtl（可以理解为：Right To Left）：文本方向从右向左

设置书写模式“writing-mode”

该属性用于设置文本的书写模式，即可以像对联那像从上到下的书写模式，也可以像古典中文那样从上到下且从右到左的书写模式。由于是CSS 3的新属性，在兼容性上也存在一些小问题，可以前往Can I Use去查看该属性对浏览器支持的情况，可以发现除了IE系列一如既往的支持较差以外，老版本的主流浏览器在使用的时候也需要加上属性前缀，不过最新版本的主流浏览器基本支持该属性，不支持的值我们已经在下方属性值的后方用括号进行了说明。

属性的可用值有：

• horizontal-tb：水平方向从左到右，垂直方向自上而下的书写方式，即常规书写方式。相当于：left → right，top → bottom
• vertical-rl、tb（Edge不支持）、tb-rl：垂直方向自上而下，水平方向自右而左的书写方式。相当于：top → bottom，right → left
• vertical-lr：垂直方向自上而下，水平方向从左到右的书写方式。相当于：top → bottom，left → right
• sideways-lr（只有火狐支持）：内容垂直方向从下到上，从左到右换行的书写方式。相当于：常规书写形式整个逆时针旋转90°
• sideways-rl（只有火狐支持）：内容垂直方向从上到下，从右到做换行的书写方式。相当于：常规书写形式整个顺时针旋转90°

单行文本裁切“text-overflow”

该属性规定当文本溢出包含元素时进行的处理。该属性主要包含两个值：

• ellipsis：显示省略符号来代表被裁剪的文本
• clip：裁剪文本

不过该属性不能单独使用，要想完美实现它的功能要首先保证元素应该有一个宽度属性“width”（像素和百分比单位都可以），然后是必须要配合空格符和换行符处理属性“white-space”和内容溢出处理属性“overflow”来使用（该属性的常规使用见“CSS显示与定位”这章的“裁切显示属性‘overflow’”一节内容），且当前标签的宽度不大于带有“overflow”属性的父级元素的宽度，否则会达不到所期望的效果。

多行文本裁切“-webkit-line-clamp”

该属性的值为一个数字，表示保留几行后开始对文本进行裁切。从该属性的名称来看，它是一个非标准属性，甚至连W3C标准的草案阶段都没有进，但是却得到了各主流浏览器的兼容。不管是Edge还是Firefox这两个非Webkit内核的浏览器竟然都是能够使用这个“-webkit-”属性前缀的裁切属性，这种各浏览器都向Webkit内核看齐的行动是以往难得一见的，但是IE由于架构的缺陷，全系列都不支持该属性。

但由于是非标准属性，要让其生效条件会比“text-overflow: ellipsis”更复杂一点，接下来我们就来看看要让这个属性生效会涉及到的全部属性吧。

-webkit-line-clamp: [number]

实现多行文本裁切的主要属性。值为number(纯数字)，无单位，表示保留number行后开始对文本进行裁切

overflow: hidden

对任何涉及内容溢出的处理它都是一个必要的属性，这里表示隐藏溢出部分

text-overflow: ellipsis

表示用省略号替代未能显示完整的部分。值可以为“clip”，但由于显示效果不明确所以不建议使用该值

display: -webkit-box

表示使用Webkit内核特殊的盒子模型。非Webkit内核的主流浏览器（Firefox和Edge）均能识别

-webkit-box-orient: vertical

表示webkit内核盒子的伸展方向为“纵向”。非Webkit内核的主流浏览器（Firefox和Edge）均能识别。Firefox浏览器有自己的属性“-moz-box-orient”，但是在这里它两个前缀的属性都能用

和“text-overflow: ellipsis”有所不同的是，该属性的优点是不受“text-indent”的影响，可以对多行文本进行裁切处理，相对来说更灵活；而缺点就是浏览器支持稍微差一点，而且必要的属性更多（“text-overflow”值为“ellipsis”的时候需要3个必要属性组合，而“-webkit-line-clamp”需要5个必要属性组合）。