要诊断 Mac 上浏览器两端对齐文本中的间距不均，先将段落切换为起始对齐。然后逐项测试间距规则、换行、列宽和字体加载。这个顺序有助于找出究竟是哪项更改改善了段落。

本指南适用于检查普通浏览器页面的人，例如描述列较窄的摘要目录。任务是解释异常宽大的词间空隙，并选择切实可行的修正方法。下文中的所有示例标签和尺寸均为虚构。

间距不均能说明什么

两端对齐会在一行内分配可用空间，以填满该行的行框。不同的行包含不同的词，也有不同的扩展机会，因此各行的间距不必相同。W3C 也为浏览器的两端对齐算法留有余地；相同的 CSS 并不意味着所有浏览器中的间距都相同。CSS 文本模块第 3 级

在更改任何内容之前，先区分两种观察。如果某一行上的大多数间距都比下一行宽，应检查该行的可用宽度和换行方式。如果某个特定间距特别显眼，也应检查该处边界附近的文本和样式。这些是诊断的起点，并不能证明某个特定原因。

一个简单的计算可以说明为什么需要留意空隙较少的行。假设一行的可用宽度为 480 CSS 像素，应用两端对齐之前内容占据 420 像素。在一个假设模型中，将剩余的 60 像素平均分配给六个可扩展的空格，每个空格会增加 10 像素。如果只有三个可扩展的空格，而剩余宽度相同，每个空格则会增加 20 像素。这些是计算示例，并非浏览器测量值，也不是普遍适用的渲染公式。

实际操作中，应先检查落在该行上的词，再尝试调整间距本身。可扩展机会较少的行，可能暴露出全局间距调整无法解决的换行问题。

先在 Mac 上进行一次受控比较

选择一个受影响的段落，并记录浏览器版本、页面缩放比例、大致列宽和准确文本。比较更改时保持这些条件不变。中性测试段落可用：“琥珀色面板包含圆形瓷砖。银色面板包含方形瓷砖。每个面板都附有简短标签和纯文本说明。”

在 Chrome 中按住 Control 键并点按段落，然后选择 检查。也可以按 Command–Option–I 打开开发者工具，再选择相关元素。浏览器开发者工具可用于检查当前文档，并在本地预览 HTML 和 CSS 更改。什么是浏览器开发者工具？

选择段落的父容器，而不是行内元素中的某个词。在 Chrome 的 元素面板中检查 样式和 计算值。前者包含适用的声明，包括已被覆盖的声明；后者有助于确认实际生效的值。使用属性筛选器查找各项设置。CSS 功能参考

记录 text-align、text-align-last、word-spacing、letter-spacing、white-space、hyphens、font-family 和 font-size。同时记下段落的内容宽度。这样就能建立一份简短的比较记录：原始条件、一项更改、观察到的结果。

暂时在段落上设置 text-align: start 和 text-align-last: start。如果宽大的间距消失，说明两端对齐是造成这种现象的因素。如果间距仍然存在，则继续检查显式间距和空白字符。开始下一项独立测试前，先恢复原来的对齐方式。DevTools 支持切换声明和编辑值，以实时预览效果。什么是浏览器开发者工具？

检查显式间距和保留的空白字符

启用起始对齐后，测试 word-spacing: normal。MDN 将其定义为由字体或浏览器决定的正常间距；长度值会在字体的固有词间距基础上增加间距。因此，即使尚未应用两端对齐，继承而来的正值也可能相关。word-spacing CSS 属性

如果段落中只有一部分发生变化，请检查父元素和带样式的行内子元素。分别测试现有的 letter-spacing，不要一次性重置所有排版属性。若同时更改两项设置，结果改善也无法说明究竟是哪一项起了作用。

接下来检查 white-space。在 normal 下，普通空白字符序列会折叠，文本会根据需要换行。在 pre-wrap 下，空白字符序列和源文本中的换行符会被保留，同时仍可换行。在 pre-line 下，空格会折叠，但源文本中的换行符仍会形成断行。这些差异会改变看起来像间距缺陷的现象。white-space CSS 属性

对于普通的流式说明，暂时测试 white-space: normal。如果结果有所改善，应先检查原始文本和空白规则，再决定是否永久修改。保留有意义的格式：预格式化示例和散文说明有不同的要求。此测试能识别影响布局的输入，但并不能证明所有保留的空白都应该删除。

检查短行、强制换行和列宽

最后一行是否被拉伸？

如果较短的结尾行出现异常宽大的间距，请检查 text-align-last。此属性同时控制块的最后一行，以及紧挨强制换行符之前的一行。使用 text-align: justify 时，默认的 auto 行为会将这些行对齐到起始位置；显式设置为 justify 则会拉伸这些行。测试 text-align-last: start 可隔离此条件。text-align-last CSS 属性

检查受影响的断行处是否有 br 元素。WHATWG 将其定义为内容中的换行符，并说明仅当断行属于内容本身时才应使用。对于普通的流式说明，应检查是否仅为了重现某种桌面布局而插入了换行；如果预期由文本流式排版，则让换行决定行尾。HTML 标准：br 元素

问题是否随狭窄列宽而出现？

恢复两端对齐，只更改段落的可用宽度。尝试稍宽的列，再尝试稍窄的列，同时保持文本和字体不变。记录哪些词移到了其他行，以及显眼的间距是否随之移动。

将此作为判断测试。如果较宽的列能产生更理想的行尾，就在空间允许的地方调整布局。如果说明必须保持狭窄，且多行看起来仍然稀疏，起始对齐是一种切实可行的替代方案。不要仅仅因为某个示例段落恰好能整齐排下，就选择某个宽度。

连字符断词能否提供有用的断行机会？

对于英文散文，先确认段落自身或某个祖先元素上设置了正确的 lang 值，例如 en，然后测试 hyphens: auto。自动连字符断词取决于是否标记了语言，以及是否有合适的词典可用。没有看到连字符，并不能单独证明 CSS 声明未生效。hyphens CSS 属性

此测试应使用普通词语，而不是自行编造的、不允许断开的标识符。之后检查整个段落：有用的结果是获得更好的行尾，而不只是看到连字符。如果自动连字符断词没有改善目标浏览器中的效果，就保留已奏效的宽度或对齐方案。

区分字体变化与浏览器两端对齐

如果页面初次显示后行尾发生变化，应先检查字体加载，再比较截图。CSS 字体加载 API 提供了 document.fonts.ready，这是一个在字体加载及相关布局完成后兑现的 Promise。它为测量提供了有用的同步点，不过如果页面之后又发生变化，仍可能需要再次比较。CSS 字体加载 API

进行视觉测试时，在保持宽度和字号不变的条件下，将原始段落与临时设置 font-family: system-ui 的结果进行比较。任何改善都应视为字体选择会影响此布局的证据，而不是原字体有缺陷的证明。在 Firefox 或 Safari 中，检查器的 字体视图可帮助查看所选元素实际应用的字体。什么是浏览器开发者工具？

明确文本整形的边界。HarfBuzz 会将具有相同属性的一段文本整形为定位后的字形。其文档明确说明不处理段落换行、连字符断词和两端对齐。因此，更改 HarfBuzz 设置并不是解决词间距被拉宽问题的通用浏览器 CSS 方法。HarfBuzz 不处理的内容

出于同样的原因，不要通过逐个测量并定位字符来构建替代布局。那种做法已涉及文本整形和段落布局。对于普通 DOM 文本，应继续诊断浏览器布局所使用的输入，并保留其文本渲染流程。

根据测试结果选择修正方法

使用此表将观察结果转化为有针对性的下一步操作。每一行都是一项诊断推断；请恢复原始条件并重复奏效的更改加以确认。

观察结果 接下来检查什么 可选修正方法
起始对齐后间距仍然存在 显式间距和保留的空白字符 修正相关声明或意外的文本格式
只有结尾行被拉伸 最后一行的对齐方式和强制换行 将这些行设为起始对齐；检查仅用于呈现的换行
词语重新换行后，间距也随之移动 列宽和可用的断行机会 调整宽度、测试连字符断词，或使用起始对齐
布局在加载过程中发生变化 字体加载和实际应用的字体 等字体稳定后再比较，并解决字体相关差异
更改两端对齐方法没有效果 浏览器支持情况和实际应用的声明 使用受支持的对齐和布局控件

不要将 text-justify: inter-word 当作通用修复方案。MDN 目前将 text-justify 标注为支持有限。在支持此属性的浏览器中，inter-word 会选择在词语边界扩展，而 auto 则让浏览器自行选择方法。选择在词语边界扩展，并不能保证空隙稀少的行会有较小间距。text-justify CSS 属性

如果该属性不受支持，就使用比较结果所确认的受支持方法：更改对齐方式、增加可用行宽、修正意外空白，或测试感知语言的连字符断词。最终选择应在各目标浏览器中以相近的内容宽度重新检查。浏览器之间存在差异并不单独说明存在缺陷，因为 CSS 并未规定一套完整的两端对齐算法。CSS 文本模块第 3 级

当你能通过可重复的比较解释这种现象时，就可以结束诊断：原始段落会产生该间距，一项已确认的更改能改善效果，并且在所需宽度范围内结果仍然可用。如果你负责维护该页面，就在源文件中保留这项最小且有效的修正；如果你只是在检查公开页面，就将观察到的值和复现步骤作为交付内容。

来源