---

在现代社会中，文本排版已经成为了一项非常重要的技能。无论是在工作中还是日常生活中，我们都需要使用文本排版来使我们的文本更加易读、美观和专业。作为一名前端程序员，我们最常接触的关于文本排版的就是CSS，因此本文将参考MDN介绍其中列出的文本相关属性。

温馨提示：本文中部分属性会结合设计师必看的字体与排版应用指南（以下简称指南）进行说明，如果与规范中的定义有出入，请以规范为主。

text-align

text-align属性是一个简写属性，用于设置text-align-all和text-align-last这两个子属性，并描述如果内容没有完全填充行框，块的内联级内容如何沿内联轴对齐。与vertical-align属性是垂直关系。

值得一提的是，在CSS Text Module Level 3中对text-align描述道：除了justify-all或match-parent之外的值被赋值给text-align-all，并将text-align-last重置为auto。但是CSS规范中并没有text-align-all属性，各社区也找不到对该属性的描述。

取值

关键字/值类型	简介
start	内联内容与行框的起始边缘对齐。
end	内联内容与行框的结束边缘对齐。
left	内联内容与行框的行左边缘对齐。
right	内联内容与行框的行右边缘对齐。
center	内联内容在行框中居中。
justify	根据text-justify属性指定的方法对文本进行对齐。
match-parent	该值的行为与inherit相同，只是继承的start或end值会根据父的方向值进行解释，并产生左或右的计算值。
justify-all（实验性）	与justify，但强制最后一行两端对齐。
string（实验性）	第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。如：text-align: '.' center;

需要注意的是，text-align: start/end;的起始边与结束边由direction属性决定。

text-align-last

text-align-last属性控制如何对齐块的最后一行或强制换行符之前的一行。

取值

关键字	简介
auto	受影响的行按照text-align的值对齐。
left	受影响的行与行框的左边缘对齐。
right	受影响的行与行框的右边缘对齐。
start	受影响的行与行框的起始边缘对齐。
end	受影响的行与行框的行结束边缘对齐。
center	受影响的行在行框中居中。
justify	受影响的行根据text-justify属性指定的方法对文本进行对齐。

注意点与text-align类似。

text-justify

text-justify属性设置在元素上设置文本对齐时应用于text-align: justify。

取值

关键字	简介
auto	基于性能和足够的呈现质量之间的平衡决定要遵循的调整算法。
none	关闭文本对齐。与不设置文本对齐具有相同的效果。
inter-word	通过在单词之间添加空格（有效地改变单词间距）来对齐文本，适用于英语，韩语等语言。
inter-character	通过在字符之间添加空格（有效地改变letter-spacing）来对齐文本，适合日语等语言。

line-height

line-height属性设置行框的高度。通常用于设置文本行之间的距离。对于块级元素，它指定元素行盒的最小高度；对于非替代的行内元素，它用于计算行盒的高度。

行高

行高或行距是文字排版的基础参数，也是排版品质的先决要素之一。英文行高与中文行高会有不同。

• 英文行高：英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，基线（baseline）是英文字体结构中的概念，通常是字母X的下边缘线。CSS中文字的元素都是按基线来对齐的。西文基本行高是字号的1.2倍左右，字体有上伸部（ascender）和下延部（descender）可来创造行间空隙。
• 中文行高：中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文因为字符密实且高度一致，所以一般行高需要更大，根据不同用户人群（儿童、年轻人、老年人）以及使用环境，可达到1.5 ~ 2倍甚至更大。

扩展：

• 行间距：是指临近两行之间的距离。同样分为英文行间距和中文行间距
  • 英文行间距：英文的行间距指的是一行英文的底部线与下一行英文的顶部线之间的距离。可以简单的理解为行与行之间的距离。另外英文文字底部和顶部都有对应的专有名词，英文顶部的那条叫升部线，底部那条叫降部线。
  • 中文行间距：是指一行文字的最底部与下一行文字的最顶部之间的距离。即行与行之间的距离。
• 段间距：段落与段落之间的距离，可保持页面节奏，与字体、行高相互关联。 为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比较常规也比较合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。行间距越大，段间距就越大；行间距越小，段间距就越小，行距与段间距成正比。段落之间首尾的行之间间距应该大于段内的间距，这时候就应该增加段间距，使得文本的阅读体验得到进一步的提升。

取值

关键字/值类型	简介
normal	根据字体参数自动确定首选的行高。桌面浏览器（包括 Firefox）使用大约1.2的默认值，具体取决于元素的font-family。
number（无单位）	首选行高是这个数字乘以元素的计算字体大小。计算值与指定值一致。在大多数情况下，这是设置line-height并避免由于继承而导致意外结果的首选方法。不允许负值
length	指定的长度作为首选的行高。以 em 为单位给出的值可能会产生意外的结果。不允许负值。
百分比	相对于元素本身的字体大小。计算值为此百分比乘以元素的计算字体大小。百分比值同样可能会产生意外的结果。

注意：当值为无单位数字、长度或百分比时，它们的继承方式不同：第一个继承为数字，如果后代的字体大小不同，则会导致行高不同；后两者作为绝对长度继承，这将不受后代字体大小的影响。

可访问性问题

对主要段落内容的line-height使用最小值1.5。这将帮助患有低视力疾病的人，以及有认知问题（如阅读障碍）的人。如果缩放页面以增加文本大小，则使用无单位值可确保行高按比例缩放。

vertical-align

vertical-align属性设置内联、内联块或表格单元格框的垂直对齐方式。vertical-align只适用于行内、行内块和表格单元格元素，不能用它来垂直对齐块级元素。

取值

关键字/值类型	简介
baseline	将元素的基线与其父元素的基线对齐。如果方框没有基线，则将底边距与父元素的基线对齐。
middle	将方框的垂直中点与父方框的基线加上父方框的字符x高度的一半对齐。
sub	将方框的基线降低到父方框下标的适当位置。此值对元素文本的字体大小没有影响。
super	将方框的基线提高到父方框上标的适当位置。此值对元素文本的字体大小没有影响。
text-top	将盒子的顶部与父内容区域的顶部对齐。
text-bottom	将盒子的底部与父内容区域的底部对齐。
top	将元素的顶部及其后代与整行的顶部对齐。
bottom	将元素及其后代的底部与整行的底部对齐。
长度	将元素的基线与其父元素基线上方的给定长度对齐。0cm表示与基线相同，允许使用负值。
百分比	将元素的基线与其父元素基线上方的给定百分比对齐。0%表示与基线相同，允许负值。

具体效果：

注意：上图中文本的线条是通过text-decoration-line属性绘制的线条，与我们所说的中线、基线那些概念是不一样的。在CSS2规范中对基线的定义是这样的：

• 内联表的基线是表第一行的基线。
• 内联块的基线是正常流中最后一个行框的基线，除非它没有行内行框，或者它的overflow属性有一个不可见的计算值，在这种情况下，基线是底部边缘。

direction和unicode-bidi

direction属性设置文本、表列和水平溢出的方向。从右到左书写的语言（如希伯来语或阿拉伯语）使用rtl，从左到右书写的语言（如英语和大多数其他语言）使用ltr。该属性设置块级元素的基本文本方向以及unicode-bidi属性创建的嵌入的方向。它还设置文本的默认对齐方式、块级元素以及单元格在表格行中的流动方向。

unicode-bidi属性与direction属性一起确定如何处理文档中的双向文本。例如，如果内容块同时包含从左到右和从右到左的文本，则用户代理将使用复杂的Unicode算法来决定如何显示文本。unicode-bidi属性覆盖此算法，并允许开发人员控制文本嵌入。

取值

direction取值

关键字/值类型	简介
ltr	将行内基本方向(bidi方向)设置为行左到行右。
rtl	将行内基本方向(bidi方向)设置为行右到行左。

unicode-bidi取值

关键字/值类型	简介
normal	该元素不提供相对于双向算法的额外嵌入级别。对于内联元素，隐式重新排序跨元素边界工作。
embed	如果元素是内联的，则此值将打开相对于双向算法的额外嵌入级别。此嵌入级别的方向由direction属性给出。
bidi-override	对于内联元素，这将创建覆盖。对于块容器元素，这将为不在另一个块容器元素中的内联级后代创建覆盖。这意味着在元素内部，重新排序严格按照direction属性顺序进行;双向算法的隐式部分将被忽略。
isolate	指示应在不考虑此元素内容的情况下计算元素的容器方向性。因此，该元素与其同级元素隔离。当应用其双向分辨率算法时，其容器元素将其视为一个或多个 U+FFFC Object Replacement Character，即类似于图像。
isolate-override	将隔离关键字的isolate行为应用于周围内容，将双向覆盖关键字的bidi-override行为应用于内部内容。
plaintext	此关键字使元素的方向性计算不考虑其父双向状态或direction属性的值。方向性是使用Unicode双向算法的P2和P3规则计算的。此值允许显示已使用遵循Unicode双向算法的工具格式化的数据。

注意：

• 因为用户代理可以关闭CSS样式，建议HTML作者使用HTMLdir属性和<bdo>元素来确保在没有样式表的情况下正确的双向布局。作者不应该在HTML文档中使用direction和unicode-bidi。
• 与HTML中的dir属性不同，direction属性不会从表列继承到表单元格中，因为CSS继承遵循文档树，并且表单元格位于行内但不在列内。
• 通常（即unicode-bidi:normal）一个内联框对unicode bidi算法是透明的；内容是有序的，就好像盒子的边界不存在一样。unicode-bidi属性的其他值导致内联框在算法中创建作用域，并覆盖文本的内在方向性。
• 当在unicode-bidi属性值为normal的行内盒上指定direction属性时，对bidi重排序没有影响，因为相对于双向算法，该框不会打开额外的嵌入级别。

writing-mode

这个属性指定文本行是水平布局还是垂直布局，以及文本块的前进方向。

取值

关键字/值类型	简介	具体效果
horizontal-tb	对于ltr脚本，内容从左到右水平排列。对于rtl脚本，内容从右向左水平排列。下一条水平线位于前一条线的下方。
vertical-lr	对于ltr脚本，内容从上到下垂直排列，下一行垂直行位于上一行的右侧。对于rtl脚本，内容从下到上垂直排列，下一行垂直行位于上一行的左侧。
vertical-rl	对于ltr脚本，内容从上到下垂直排列，下一行垂直行位于上一行的左侧。对于rtl脚本，内容从下到上垂直流动，下一行垂直行位于上一行的右侧。
sideways-lr（实验性）	对于ltr脚本，内容从下到上垂直流动。对于rtl脚本，内容从上到下垂直流动。所有字形（即使是垂直脚本中的字形）都向左侧设置。兼容性较差。	-
sideways-rl（实验性）	对于ltr脚本，内容从上到下垂直排列。对于rtl脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都向右侧向设置。兼容性较差。	-

注意，如果一个盒子的写模式值与它的父盒子不同（即最近的祖先没有display: contents）:

• 如果该框将以其他方式成为具有内联计算显示的流内框，则其显示将计算为行内块。
• 如果盒子是块容器，那么它会建立一个独立的块级格式化上下文。
• 更一般地说，如果其指定的内部显示类型是flow，则其计算的内部显示类型将成为flow-root。

text-orientation

text-orientation属性指定行内字符的方向。仅在垂直排版模式中起作用。

取值

关键字	简介	具体效果
mixed	将水平排版的字符顺时针旋转 90°。自然地布置垂直脚本的字符。
upright	自然地（垂直地）显示水平脚本的字符，以及垂直脚本的字形。
sideways	字符按水平方向排列，但整行顺时针旋转90°。
sideways-right	为兼容目的而保留的侧sideways的别名。	-

注意：

• upright会强制direction的值为ltr。

• CSS Writing Modes Level 4：

  在撰写本文时，主要实现都不支持对RTL字符进行自动LTR处理，以实现垂直排版。在这种情况下，作者可能需要显式地指定unicode-bidi和direction，如下例所示:

  .vertical-upright-hebrew {
     writing-mode: vertical-rl;
     text-orientation: upright;
     unicode-bidi: bidi-override;
     direction: ltr;
  }
  

text-combine-upright

text-combine-upright属性指定将多个印刷字符单元组合到单个印刷字符单元的空间中。如果合并的文本宽度大于1em，用户代理必须适合1em以内的内容，见下文。为了布局和装饰的目的，生成的组合被视为一个直立的字形。此属性仅在垂直书写模式下有效。

定义看着很懵对吧，其实这个属性就是为了实现下面这种效果：

取值

关键字	简介
none	没有特殊处理。
all	尝试对方框内的所有连续字符进行水平排版，以便它们占用方框垂直线内单个字符的空间。
digits	尝试显示连续ASCII数字序列（U+0030–U+0039），该序列的字符数与指定的整数一样多或更少，因此它占用了垂直行框中单个字符的空间。

注意：

• all关键字会将所应用的元素中的所有字符（不单单是数字）都水平排列塞到1em框中；想要达到上面那种效果，只能用元素包裹住需要处理的文本，在包裹的元素上使用text-combine-upright: all。

• digits关键字后可以以空格分隔接一个2~4（包含）之间数字，表示在1em框中能放几个数字。如果省略整数，则计算为2。超出2-4范围的整数无效。这里需要注意：

  假设现在有一段文本：我有10,000块钱。因为digits最大就是4，直接digits 4仍然会漏掉一个0。也就是说，对于数字过长的文本，应该使用all，而不是digits（另外，大部分浏览器不兼容digits）。

• 为避免呈现和布局的复杂性，text-combine-upright只能组合纯文本（不被方框边界中断的连续排版字符单元）。

文本装饰相关属性

文本装饰是根据字体和排版规则在排版后装饰文本的字形。该部分的属性主要为text-decoration及其子属性。

先行提醒：文本装饰不会应用到伪元素中，除非直接在伪元素上指明相应的属性。

text-decoration-line

text-decoration-line属性指定向元素中添加的线条修饰（如果有）。

取值

关键字	简介
none	不产生也不禁止文本装饰。
underline	每行文本都带有下划线。
overline	每行文本都带有上划线。
line-through	每一行的文本都带有删除线。

text-decoration-line属性接受多个以空格分隔的关键字。另外，如果要指定的修饰具有特定的语义含义，比如<del>元素表示已删除的文本，则优先使用HTML元素，在这种情况下语义含义不会消失。

text-decoration-style

text-decoration-style属性为元素上指定的text-decoration-line的样式。

取值

关键字	简介
soild	画一条单线。
double	画一条双行线。
dotted	画一条点状虚线。
dashed	画一条短线虚线。
wavy	画一条波浪线。

注意：text-decoration-style属性不像text-decoration-line属性能接收多个关键字。

text-decoration-color

text-decoration-color属性指定在具有text-decoration-line的元素上设置的文本修饰（下划线上划线和行通线）的颜色。

取值

text-decoration-color属性接受一个颜色值。

CSS Text Decoration Module Level 3：在源自给定元素的所有装饰上，文本装饰的颜色必须保持相同，即使后代框具有不同的指定颜色。

可访问性问题

颜色本身不应该被用来传达意义。文本修饰的颜色与背景和文本颜色的对比度要高，保证存在视力问题的人群能够阅读页面内容。

text-decoration-thickness

text-decoration-thickness属性设置在具有text-decoration-line的元素上指定的下划线、上划线和线条的描边粗细。该属性会影响从该元素产生的所有修饰，即使后代指定了不同的粗细。

取值

关键字/值类型	简介
auto	用户代理为文本装饰线选择适当的宽度。
from-font	如果第一个可用字体具有指示首选下划线宽度的信息，则使用该宽度，否则行为为auto。
length	指定文本装饰线条的粗细为固定长度。
百分比	指定文本修饰线的粗细，以1em的百分比表示。

当值为length或百分比时，应将实际值四舍五入到最接近的整数设备像素，并确保至少是一个设备像素。

text-decoration

text-decoration属性用于在一个声明中设置文本text-decoration-line、text-decoration-color、text-decoration-style和text-decoration-thickness的简写。

语法

text-decoration：text-decoration-line || text-decoration-color || text-decoration-style || `text-decoration-thickness`

顺序可以不按顺序指定，不指定的值取默认值。

CSS Text Decoration Module Level 3：改简写属性有目的地省略了text-underline-position属性，这是一个依赖于语言/书写系统的设置，用于屏蔽内容，以便它可以独立于文本装饰简写的(未继承的)风格设置级联和继承。

text-decoration-skip-ink

text-decoration-skip-ink属性控制线条和下划线在符号上交叉时的绘制方式。举个栗子：当文本当中有g，y等字母，并且指定了text-decoration-line: underline;，这种情况下，在下划线遇到g，y等字母时是断开下划线还是直接穿过字母由text-decoration-skip-ink控制，上划线也是一样。

取值

关键字	简介
none	不会中断下划线和上划线。
auto	可能会中断下划线和上划线，当线条将穿过字形墨水，并与字形轮廓的任何一侧有一定距离。
all	必须中断下划线和上划线。大部分浏览器不兼容该值。

示例

<style>
  .skipink {
    text-decoration: underline solid red;
    text-decoration-skip-ink: auto;
  }
</style>

<body>
  <p class='skipink'>abcdefghijklmn<p>
</body>

结果：

text-underline-position

text-underline-position属性指定在元素上指定的下划线的位置。

取值

关键字/值类型	简介
auto	用户代理可以使用任何算法来确定下划线的位置；但它必须置于字母基线或在字母基线之下。
left	用于垂直排版中使用，强制将文本修饰放置在文本的左侧。
right	用于垂直排版中使用，强制将文本修饰放置在文本的右侧。
under	下划线位于元素的文本内容之下。
auto-pos（非标准）	auto的同义词，应该用auto代替。
above（非标准）	强制该行位于文本上方。当与东亚文本一起使用时，使用auto关键字将导致类似的效果。
below（非标准）	强制该行位于文本下方。当与东亚文本一起使用时，使用auto关键字将导致类似的效果。

在水平排版模式中，left和right均被视为auto。

text-underline-offset

text-underline-offset属性设置下划线从其零位置的偏移量。正值表示与文本向外的距离，负值向内偏移。

取值

关键字/值类型	简介
auto	用户代理为下划线选择适当的偏移量。。
length	将下划线的偏移量指定为固定长度。
百分比	将下划线的偏移量指定为1em的百分比。大部分浏览器不兼容该值类型。

注意：

• 百分比值会作为相对值继承，因此将随着字体的继承而变化而缩放。
• text-underline-offset只影响下划线，而不影响其他可能的线条装饰选项，如overline或line-through。

文本强调相关属性

东亚文献传统上在每个字形旁边使用小符号来重音强调一连串文本，比如： 文本强调属性通常就是用来将强调标记应用于此类文本。

the text-emphasis-style

the text-emphasis-style属性用于将强调标记应用于元素的文本。

取值

关键字/值类型	简介	filled形状	open形状
none	无强调标记。	-	-
filled	纯色填充的形状。	-	-
open	空心的形状。	-	-
dot	显示小圆圈作为标记。	•	◦
circle	显示大圆圈作为标记。	●	○
double-circle	显示双圆作为标记。	◉	◎
triangle	显示三角形作为标记。	▲	△
sesame	显示芝麻作为标记。	﹅	﹆
string	将给定的字符串显示为标记。	-	-

从第三个关键字开始，往后的关键字叫shape关键字。如果指定了shape关键字，但是没有指定filled或者open，则默认为filled；如果只指定了filled或者open，则在水平排版模式下，强调标记默认为circle，垂直排版模式下则为sesame。

如果值为一个string时，最好不要指定多个字符，可能会被截断或者忽略。

注意：

• 强调标记在垂直排版模式下保持直立，它们不会旋转以匹配writing-mode。
• 标记为每个印刷字符单元绘制一次。但是对于以下情况不作强调标记:
  • 单词分隔符或属于Unicode分隔符类(Z*)的其他字符。(强调标记是为与任何组合字符组合的空格绘制的)。
  • 标点符号——具体来说，属于Unicode（P*）通用类别的任何字符，并且没有NFKD标准化[UAX15]为以下任何符号:
  • 属于控制码和未赋值字符(Cc, Cf, Cn)的Unicode类的字符。

text-emphasis-color

text-emphasis-color属性指定强调标记的前景色。

取值

与color类似，也是一个颜色值。

注意：Currentcolor关键字计算自身，并在执行继承后解析为color的值。这意味着文本强调颜色在默认情况下匹配文本颜色，即使颜色在元素之间发生变化。

text-emphasis

text-emphasis属性是在单个声明中设置the text-emphasis-style和text-emphasis-color的简写。

取值

将the text-emphasis-style和text-emphasis-color拼接起来即可。

语法

`text-emphasis`: `the text-emphasis-style` || `text-emphasis-color`;

注意：text-emphasis会继承，这意味着可以更改后代的强调标记。

the text-emphasis-position

the text-emphasis-position属性指定绘制强调标记的位置。

取值

关键字	简介
over	在水平印刷模式下，在文本上面绘制标记。
under	在水平印刷模式下，在文本下面绘制标记。
right	在垂直印刷模式下，在文本右侧绘制标记。
left	在垂直印刷模式下，在文本左侧绘制标记。

强调标记的首选位置

强调标记的首选位置取决于语言。根据CSS Text Decoration Module Level 3的内容，强调标记的首选位置表如下：

语言	水平排版	垂直排版
日语、蒙古语和朝鲜语	over	right
中文	down	right

与<ruby>的冲突问题

同样，根据CSS Text Decoration Module Level 3的内容，如果将强调标记应用于在与强调标记相同的位置绘制拼音的字符，则强调标记将放置在<ruby>外部。我在chrome浏览器上测试一起使用时，直接作用在<ruby>上没有效果；作用在<rt>时，<rt>有几个字符，就会显示几个强调标记。

• 如果在冲突时想要隐藏强调标记，可以指明：ruby { text-emphasis: none; }。
• 如果在冲突时想要隐藏<ruby>拼音，可以像这样指明：

  em { text-emphasis: dot; } 
  em rt { display: none; }
  

text-indent

text-indent属性设置块中文本行之前放置的空白空间（缩进）的长度。该属性具体效果受direction和writing-mode值的影响。

取值

关键字/值类型	简介
each-line（实验性）	缩进影响每个块容器的第一行和强制换行后的每一行(但不影响软换行后的行)。
hanging（实验性）	除第一行外的所有行都将缩进。
长度	指定缩进为固定长度。允许使用负值。
百分比	缩进是包含块宽度的百分比值。

text-indent属性会继承，当在块元素上指定时，它将影响后代内联块元素。另外，值可以是用空格分隔的长度/百分比与两个关键字的组合。

text-overflow

text-overflow属性指定当内联内容在其块容器元素的内联级数方向溢出其结束行框边时的呈现。

取值

关键字/值类型	简介
clip	剪切掉溢出其块容器元素的内联内容。可能会出现文字部分显示的情况。
ellipsis	呈现一个省略号（...）来表示剪切的内联内容。
fade	剪辑溢出的内联内容，并在行框边缘附近应用淡出效果，边缘完全透明。
fade()	该函数接收一个长度值/百分比值为参数，剪切溢出的内联内容，并在线条框边缘附近应用淡出效果，边缘完全透明。参数确定应用淡入淡出效果的距离。百分比值根据线条框的宽度进行解析。小于0的值将裁剪为0，大于线条框宽度的值将裁剪为线条框的宽度。
string	用于表示剪裁的文本。字符串显示在内容区域内，从而缩短显示文本的大小。如果没有足够的空间来显示字符串本身，则会将其剪裁。
关于省略号：

• 省略号只影响渲染，不影响指针事件的布局和分派。
• 省略号根据块的样式和基线对齐。
• 省略发生在相对定位和其他图形转换之后。
• 如果没有足够的空间用于省略号，则剪辑省略号本身的呈现。
• 如果块具有text-overflow: ellipsis;，在滚动时依然显示省略号，被省略的内容不会动态显示。

注意：

• 如果没有足够的空间用于省略号，则会剪辑省略号本身的呈现。
• text-overflow属性可以接受一个或两个值，一个值指定行尾的溢出行为；两个值则其中第一个值指定行左端的溢出行为，第二个值指定行的右端溢出行为。但大部分浏览器不兼容这种语法。
• text-overflow属性属性的具体效果受direction和writing-mode属性影响。

单行/多行文本溢出显示省略号

// 单行文本溢出显示省略号
p {
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行文本溢出显示省略号
p {
  overflow: hidden;
  display: -webkit-box;
  width: 100px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

text-shadow

text-shadow属性向文本添加阴影。接受要应用于文本及其任何装饰的逗号分隔阴影列表。每个阴影都由元素的X和Y偏移、模糊半径和颜色的某种组合来描述。

注意：

• 与box-shadow属性不同，text-shadow属性没有扩散半径值，也不支持inset关键字。
• 当给定多个阴影时，阴影将从前到后应用，第一个指定的阴影位于顶部。

text-transform

text-transform属性指定如何将元素的文本大写。它可用于使文本以全大写或全小写形式显示，也可单独对每一个单词进行操作。它还可以帮助提高<ruby>的易读性。

取值

关键字	简介
none	表示用户代理应在速度、易读性和几何精度之间做出适当的权衡，但易读性比速度和几何精度更重要。
capitalize	将每个单词的第一个印刷字母单位(如果是小写)改为大写。其他字符不受影响。
uppercase	把所有的字母都大写。
lowercase	把所有的字母都小写。
full-width	以全宽格式显示所有印刷字符单位。如果字符没有相应的全宽格式，则保持原样。通常用于排版拉丁字母和数字，就像它们是表意字符一样。
full-size-kana	通常用于<ruby>注释文本，将所有小假名字符转换为等效的全尺寸假名，以补偿 ruby 中常用的小字体的易读性问题。

当指定了多个值，需要应用多个转换时，将按以下顺序应用:

1. capitalize, uppercase和lowercase。
2. full-width。
3. full-size-kana。

注意：

• 不能为了语义目的而依赖文本转换;相反，应该在源文档文本和标记中编码正确的大小写和语义。
• 文本转换的目的是允许在不影响文档语义的情况下进行表示大小写转换。特别要注意的是，文本转换的大小写操作是有损耗的，并且可能会扭曲文本的含义。虽然可访问性接口可能希望向用户传达呈现文本的表面外壳，但不能依赖转换后的文本准确地表示文档的基本含义。
• text-transform属性考虑了特定于语言的大小写映射规则：
  • 在突厥语中，如土耳其语（tr），阿塞拜疆语（az），克里米亚鞑靼语（crh），伏尔加鞑靼语（tt）和巴什基尔语（ba），有两种带点和不带点的i，以及两种大小写配对：i / İ和ı / I i。
  • 在德语 （de） 中，ß 变为大写的 SS。
  • 在荷兰语 （nl） 中，ij 二合字母变为 IJ，即使使用text-transform: capitalize，它只将单词的第一个字母大写。
  • 在希腊语 （el） 中，当整个单词为大写 （ά/Α） 时，元音会失去重音，但析取 eta （ή/Ή） 除外。此外，在第一个元音上带有重音的双元音会失去重音，并在第二个元音上获得重音（άι/ΑΪ)。
  • 在希腊语 （el） 中，小写 sigma 字符有两种形式：σ 和 ς。ς 仅在 sigma 终止单词时使用。将text-transform: lowercase应用于大写西格玛 （Σ） 时，浏览器需要根据上下文选择正确的小写形式。
  • 在爱尔兰语（ga）中，当基本首字母大写时，某些前缀字母保持小写，例如text-transform: uppercase会将ar aon tslí更改为AR AON tSLÍ，而不是像人们所期望的那样，AR AON TSLÍ（仅限Firefox）。AR AON tSLÍ在某些情况下，大写时也会删除连字符：an t-uisce 转换为 AN tUISCE（并且连字符通过文本转换正确重新插入text-transform: lowercase）。
• text-transform会影响换行和其他格式化操作。
• 纯大写字母文本本身不太适合大篇幅阅读，会加大阅读障碍，用的时候注意要额外拉开字母之间的字间距，提升可读性。

text-rendering

text-rendering属性提供了在呈现文本时进行速度、易读性和几何精度之间权衡的提示。

MDN： 该属性是SVG的属性而不是标准的CSS属性。但是Gecko（Firefox和Webkit（Chrome、Safari内核的浏览器允许该属性在Windows、Mac OS和Linux操作系统中应用于HTML和XML内容。

取值

关键字	简介
auto	表示用户代理应在速度、易读性和几何精度之间做出适当的权衡，但易读性比速度和几何精度更重要。
optimizeSpeed	指示用户代理应强调呈现速度而不是易读性和几何精度。此选项有时会导致用户代理关闭文本抗锯齿。
optimizeLegibility	指示用户代理应强调易读性而不是呈现速度和几何精度。用户代理通常会选择是否应用抗锯齿技术，内置字体提示或两者兼有，以生成最易读的文本。
geometricPrecision	指示用户代理应强调几何精度而不是易读性和呈现速度。此选项通常会导致用户代理暂停使用提示，以便以与路径数据呈现相当的几何精度绘制字形轮廓。

letter-spacing与word-spacing

letter-spacing属性设置文本字符之间的水平间距行为。此值将在呈现文本时添加到字符之间的自然间距中。

word-spacing属性设置单词之间和标记之间的间距长度。

字间距设计

字间距，即字符间的距离，事实上他是字符图形外边界框的尺寸和字符在方框中的位置的距离。西文字间距还分为：比例字体和等宽字体

• 比例字体：根据字符外形特点设置不同字宽的字体，使得字体外形协调，可读性更好；
• 等宽字体：每个字符设置相同字宽的字体，字符间距较大，它们经常被用于显示计算机代码。

字间距的三种形式

• 标准间距：即默认的字间距，字与字之间的距离不大也不小，在设计中要根据不同的字号设置不同的字间距来排版，往往需要我们根据字号、字重的不同动态调节间距参数，避免千篇一律使用软件默认间距。
• 紧凑间距：字与字之间的距离向里缩进，在字符工具里的“字间距”数值为负数，一般在-5%~-30%不等，通常用在标题中。
• 宽松间距：与紧凑型间距相反，字与字之间间距向外扩大，在字符工具里的“字间距”数值为正数，一般在5%~30%不等，通常用在正文中。

词间距设计

在西文阅读时，视觉上的自然界限是词距而不是字距。如果排版时需要进行例如两端对齐的行内间距调整，中文直接可以动字距，把调整量均匀地放到每个字间里；而西文却是动词距，只能把调整量加到词距里，而单词内部的字距依然是保持字体设计师预设的原始字距，这是保证西文易读性的关键所在。

取值

关键字/值类型	简介
normal	正常的当前字体的字符/单词间距。与值0不同，允许用户代理更改字符之间的间距以对齐文本。
length	除了字符/单词之间的默认空格外，还指定额外的字符间空格。值可以为负，但可能存在特定于实现的限制。用户代理不得进一步增加或减少字符/单词间空间以对齐文本。

注意：

• letter-spacing和word-spacing不会应用到行首，对于行尾，根据规范的说法是：未定义是否在行尾应用字母间距。
• letter-spacing属性会被后代元素继承，
• CSS Text Moudel Level 3：两个排版字符单位之间的字母间距实际上属于包含两个排版字符单位的最内层元素：两个相邻排版字符单位之间的总字母间距(在bidi重排序之后)由包含两个排版字符单位边界的最内层元素指定并呈现。但是用户代理可以使用属于其包含元素的字母间距值将元素边界处的字母间距附加到一个或另一个印刷字符单元。

可访问性问题和国际化

较大的正或负letter-spacing值将使应用样式的单词不可读。对于具有非常大的正值样式的文本，字母之间的距离将很远，以至于单词将显示为一系列单独的、不相连的字母。对于具有非常大的负值样式的文本，字母将相互重叠，直到无法识别单词。

清晰的字母间距必须根据具体情况确定，因为不同的字体系列具有不同的字符宽度。没有一个值可以确保所有字体系列自动保持其易读性。

某些书面语言不应应用任何字母间距。例如，使用阿拉伯文字的语言希望连接的字母保持视觉连接。

---

较大的正或负word-spacing值也将使应用样式的句子不可读。对于具有非常大的正值样式的文本，单词将相距甚远，以至于它不再显示为句子。对于使用较大的负值设置样式的文本，单词将相互重叠，直到无法识别每个单词的开头和结尾。

清晰的word-spacing必须根据具体情况确定，因为不同的字体系列具有不同的字符宽度。没有一个值可以确保所有字体系列自动保持其易读性。

行长

下文的内容会接触换行细节跟连字符相关的属性，因此先说明行长的设计

在《中文排版需求》里，明确写明了这项基本要求：

2.3.5 版心设计的注意事项：「一行的行长应为文字尺寸的整数倍，各行的位置尽可能头尾对齐。」

「一行的行长应为文字尺寸的整数倍」，这一基本的、理所应当的需求看似简单，但是在实际操作中，却往往由于单位换算等各个原因没有得到实现。对于后半句提到的头尾对齐，将另文讨论，但显然也和本文相关。正因为设计师想实现头尾对齐才会盲目地用软件的两端对齐功能，大家可以看看身边的印刷品，注意看一下每段的最后一行间距是不是统一，就可以知道设计师有没有按照这个原则排版。

中文的一个字占两个字符，英文一个字占一个字符。正文的行长通常在40到60个字符之间。在行长较宽的区域（例如桌面）中，包含最多120个字符的较长行将需要将行高增大。行长过长易读性就会变差，读者阅读时容易串行，造成阅读困难。合理的行长使用户在行间跳转时感到轻快和愉悦，反之则会使阅读成为一种负担。

white-space

white-space属性是用来设置如何处理元素中的空格。该属性表明了两件事:

• 空白字符是否以及如何它们该如何合并。
• 行是否采用软换行。

取值

关键字	简介
normal	连续的空白符会被合并，换行符会被当作空白符来处理。
nowrap	和normal一样，连续的空白符会被合并。但文本内的不允许换行。
pre	连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap	连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充行框盒子时才会换行。
pre-line	连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充行框盒子时会换行。
break-spaces	与pre-wrap的行为相同，but：1. 任何保留的空白序列总是占用空间，包括在行尾。2. 每个保留的空格字符后都存在换行机会，包括空格字符之间。3. 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

注意：

• break-spaces不能保证永远不会因为空白符而溢出；例如，如果行长很短，甚至一个空白字符都不合适，溢出是不可避免的。
• 在某些情况下，保留的空格和其他空格分隔符可以挂在行尾；这可能会影响是否测量它们的内在大小。

word-break

word-break属性设置是否在文本溢出内容框的地方出现换行符。它不影响由空格（以及其他空格分隔符）和标点符号周围创建的软换行机会的规则。

取值

关键字	简介
normal	使用默认换行符规则。
break-all	应在任意两个字符之间插入换行符（不包括CJK文本，即中文/日语/韩语文本）。
keep-all	CJK文本不应使用换行符。非CJK文本的行为与normal相同

示例：

overflow-wrap

overflow-wrap属性指定当不可分割的字符串太长而无法放入行框时，用户代理是否可以在行中不允许的点处断开以防止溢出。它只在white-space允许换行时起作用。

取值

关键字	简介
normal	只能在正常的单词断点（例如两个单词之间的空格）处换行。
anywhere	如果行中没有其他可接受的断点，则其他无法断开的字符串（如长单词或 URL）可能会在任何时候中断。在断点处不插入连字字符。在计算最小含量固有尺寸时，会考虑分词符引入的软换行机会。
break-word	与anywhere值相同，如果行中没有其他可接受的断点，则通常不可分割的单词允许在任意点上被分割，但在计算min-content内在大小时，不考虑由单词分割引入的软换行机会。

line-break

line-break属性指定在使用标点符号时如何对CJK文本进行换行。

取值

关键字	简介
auto	由用户代理决定要使用的换行限制，并且它可以根据行的长度改变限制；例如，对短行使用限制较少的换行规则集。
normal	使用最常见的换行规则分隔文本。
loose	使用限制最小的换行规则分隔文本。通常用于报纸等短行。
strict	使用最严格的换行规则分隔文本。
anywhere	在每个印刷字符单元的周围，都有一个软换行的机会，包括任何标点符号、保留的空白字符或是单词之间。但忽略任何用于阻止换行的字符，即使是来自 GL、WJ 或 ZWJ 字符集的字符，或是由word-break属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符。

具体效果： 假设有一段有标点符号的文本：今天天气真好。 现在一行装不下这段文本，需要在好字前或后换行，有两种情况：一种是在好字前换行，下一行就形成好。；一种是在好字后换行，下一行形成 。

标点避头尾：在古代，书籍排版可以做到字间距恒定，原因是古代不存在标点，也就没有标点避头尾导致的种种问题。而现代汉语存在标点符号，有的标点不能放在行首(如逗号、顿号、句号等)，有的不能放在行尾(引号、前括号等)。处理方式叫做优先推出式标点避头尾，通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定。

连字符相关属性

连字符是一种有控制的单词分割，通常不允许它们被分割，以改善段落的布局，通常在音节或语素边界上分割单词，并在视觉上显示分割(通常通过插入连字符U+2010)。在某些情况下，连字符也会改变单词的拼写。连字规则是特定于语言的。在HTML中，语言由lang属性确定，仅当此属性存在且相应的连字词典可用时，浏览器才会使用连字符。确切的连字可能因浏览器而异。

hyphens

hyphens属性指定当文本跨多行换行时应如何对单词进行连字符。可以完全防止连字、在文本中手动指定的点进行连字，或者让浏览器在适当的地方自动插入连字符。

取值

关键字	简介
none	单词没有连字符，即使单词内部的字符明确定义了连字符的机会。只在空白处换行。
manual	只有当单词中有字符明确表示有使用连字符的机会时，才会使用连字符。
auto	除了由条件连字符明确表示的连字符外，单词可能会在由语言适当的连字符资源自动确定的连字符机会处断开。

• auto设置的行为取决于正确标记的语言，以选择适当的断字规则。必须使用HTMLlang属性指定语言，以确保在该语言中应用自动断字。

建议换行机会

有两个Unicode字符可以用于在文本中手动指定可能的换行点：

• U+2010（HYPHEN）：硬连字符表示一个可见的换行点。即使在指定的位置没有真正换行，连字符仍然会显示出来。实体符号为‐，与直接在键盘上输入-效果是一样的。
• U+00AD（SHY）：一个不可见的软连字符。此字符不会直接在屏幕上显示出来，而是表示在必要时浏览器可能会在该位置断开单词并出现连字符。在HTML中，可以使用­来插入软连字符。

注意：<wbr>元素也能添加一个换行机会，但是该元素提供的换行机会不是连字符，而是一个0宽度空格。

hyphenate-character

hyphenate-character属性设置在连字符中断之前的行尾使用的字符（或字符串）。连字符通常用于表示单词已被分隔。但是在必要时可以使用连字符指定不同类型的连字符。

取值

关键字/值类型	简介
auto	用户代理根据内容语言的排版约定选择适当的字符串。
string	指定在使用连字符时出现在连字符断点处的字符串。（这个字符串的位置不受影响：用户代理会根据内容语言的排版约定插入字符串，默认是在连字符中断之前）。用户代理可以将使用的值截断为有限数量的印刷字符单位；它不能只截断印刷字符单元的一部分。

注意：指定空字符串是有效的，并且会导致用户代理在没有插入可见的连字符的情况下中断连字符。

hyphenate-limit-chars

hyphenate-limit-chars属性指定连字符中的最小字符数。如果单词/连字符前/连字符后不满足最小字符数要求，则该单词不能使用连字符。

取值

关键字/值类型	简介
x	该值是单词应连字符之前的最小单词长度。连字符前后的最小字符数将设置为auto。
x y	第一个值是单词应连字符之前的最小单词长度。第二个值是连字符之前的最小字符数。连字符后的最小字符数将设置为等于第二个值。
x y z	第一个值是一个单词中所要求的字符总数的最小值。第二个值是连字符之前的最小字符数。第三个值是连字符后的最小字符数。

注意：

• 如果为任何值设置了 auto，则用户代理将为当前布局选择适当的值。除非用户代理可以计算出更好的值，否则将使用以下默认值：
  • 允许连字的最小字长：5
  • 连字符前的最小字符数：2
  • 连字符后的最小字符数：2
• 除非用户代理能够计算出一个更好的值，否则建议x为5，y为auto，z为2。
• 如果某个单词比提供的值短，则不会使用连字符。
• 各浏览器对该属性兼容性较差。chrome浏览器需要在109及以上的版本才支持。

写在最后

在设计师必看的字体与排版应用指南中还包含了排版的CRAP原则、信噪比在设计中的作用等有助于提高字体与排版的章节，但由于篇幅过大这里就不过多说明了（膜拜大佬，深受启发👍）。另外

参考资料

• 设计师必看的字体与排版应用指南
• 索引