若要診斷 Mac 上瀏覽器文字兩端對齊時的間距不均，請先將段落切換為起始對齊。接著一次測試一項：間距規則、換行、欄寬及字型載入。這個順序有助於找出究竟是哪項變更改善了段落。

本指南適用於檢查一般瀏覽器頁面的使用者，例如描述欄較窄的摘要目錄。目的是說明字詞間距為何異常寬大，並選擇實用的修正方式。以下範例標籤和尺寸皆為虛構。

間距不均可以透露什麼

兩端對齊會在一行內分配可用空間，以填滿該行的行框。各行包含的字詞和可擴展空格各不相同，因此間隔不必然一致。W3C 也允許瀏覽器在兩端對齊演算法上保有彈性；相同的 CSS 不代表每個瀏覽器都會產生相同的間距。CSS 文字模組第 3 級

在變更任何設定前，先區分兩種觀察。如果某一行的大多數間隔都比下一行寬，請檢查該行可用的寬度和換行方式。如果某個特定間隔特別顯眼，也要檢查該處前後的文字和樣式。這些是診斷的起點，並不能證明特定原因。

簡單計算即可說明為何值得留意空格稀少的行。假設一行可用寬度為 480 個 CSS 像素，而文字在兩端對齊前佔了 420 像素。在一個示意模型中，若將剩餘的 60 像素平均分配到六個可擴展空格，每個空格會增加 10 像素。若只有三個可擴展空格，而剩餘寬度相同，每個空格則會增加 20 像素。這些是計算範例，並非瀏覽器測量結果，也不是通用的排版公式。

實務上，這表示應先檢查哪些字詞落在該行，再嘗試調整空格本身。可擴展空格不多的一行，可能暴露出換行問題，而全域間距調整無法解決這個問題。

先在 Mac 上進行一次受控比較

選擇一個受影響的段落，記錄瀏覽器版本、頁面縮放比例、大約的欄寬及完整文字。比較變更時，保持這些條件不變。中性測試段落可使用：「琥珀色面板包含圓形磁磚。銀色面板包含方形磁磚。每個面板都附有簡短標籤和純文字描述。」

在 Chrome 中，按住 Control 鍵並點按該段落，然後選擇 Inspect。或者，按 Command–Option–I 開啟開發人員工具，再選取相關元素。瀏覽器開發人員工具可讓你檢查目前文件，並在本機預覽 HTML 和 CSS 變更。什麼是瀏覽器開發人員工具？

選取段落的容器區塊，而不是行內元素內的單一字詞。在 Chrome 的 Elements 面板中，查看 Styles 和 Computed。前者包含適用的宣告，包括已遭覆寫的宣告；後者有助於找出實際套用的值。使用屬性篩選器尋找各項設定。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 Font Loading API 提供 document.fonts.ready，這是一個 Promise，會在字型載入及相關排版完成後解析。它可作為測量的實用同步點，不過頁面後續的變更仍可能需要再次比較。CSS Font Loading API

進行視覺測試時，在欄寬和字級不變的情況下，比較原始段落與暫時套用 font-family: system-ui 的結果。若有改善，可視為字型選擇會影響此版面的證據，但不能證明原字型有缺陷。在 Firefox 或 Safari 中，檢查器的 Fonts 檢視畫面有助於查看所選元素實際套用的字型。什麼是瀏覽器開發人員工具？

請釐清文字塑形的範圍。HarfBuzz 會將具有共同屬性的文字片段塑形成定位字形。其文件明確指出，段落換行、連字和兩端對齊不在其功能範圍內。因此，變更 HarfBuzz 設定並不是修正字詞間距被拉大的通用瀏覽器 CSS 方法。HarfBuzz 不處理的事項

基於同樣理由，不要藉由逐一測量和定位字元來建立替代版面。這種作法涉及文字塑形和段落排版。對於一般 DOM 文字，請繼續診斷瀏覽器的排版輸入條件，並保留其文字算繪流程。

根據測試結果選擇修正方式

使用下表將觀察結果轉化為聚焦的下一步。每一列都是一項診斷推論；請還原原始條件，再重複成功的變更以確認結果。

觀察結果 接下來要檢查的項目 可採取的修正方式
起始對齊時間隔仍存在 明確設定的間距及保留的空白字元 修正相關宣告或非預期的文字格式
只有末尾的行被拉伸 最後一行的對齊和強制換行 讓這些行起始對齊；檢查僅為呈現效果而插入的換行
字詞重新換行時，間隔也跟著移動 欄寬和可用的斷行機會 調整欄寬、測試連字，或使用起始對齊
載入期間版面有所變化 字型載入及實際套用的字型 等字型載入完成後再比較，並排除字型相關差異
變更兩端對齊方法沒有影響 瀏覽器支援及實際套用的宣告 使用受支援的對齊和版面控制方式

不要把 text-justify: inter-word 當作通用修正方式。MDN 目前將 text-justify 標示為支援度有限。在支援的情況下，inter-word 會選擇在字詞邊界擴展，而 auto 則讓瀏覽器自行選擇方法。選擇字詞邊界並不能保證空格稀少的行間距會較小。text-justify CSS 屬性

若瀏覽器不支援此屬性，請使用比較結果證實有效的支援方式：調整對齊、增加可用行寬、修正非預期的空白字元，或測試具語言感知能力的連字。在目標瀏覽器中，以相近的內容寬度重新檢查最終方案。瀏覽器之間的差異本身並不能證明有缺陷，因為 CSS 並未規定完整且一致的兩端對齊演算法。CSS 文字模組第 3 級

當你能透過可重現的比較說明症狀，就可以完成診斷：原始段落會產生該間隔，某項明確的變更能改善結果，而且在所需的各種寬度下都仍然實用。如果你負責維護該頁面，請在原始碼中保留最精簡且有效的修正；如果你只是在檢查公開網頁，則將觀察到的數值和重現步驟作為成果。

來源