若要讓每一行換行醒目文字的兩端都保留內距，請將 box-decoration-break: clone 套用至行內元素，並為該元素設定背景和內距。請加入 WebKit 前綴宣告，以支援 Safari。MDN 說明了片段裝飾。

本指南適合在 Mac 上編輯網頁，且希望醒目顯示的字詞能在標題或段落中自然換行的人。這項工作是讓換行後的每一行都有各自帶內距的背景，同時由瀏覽器處理換行。

為什麼醒目文字換行處的內距會消失？

box-decoration-break 的初始值是 slice。行內方框跨行換行時，這個值會將裝飾視為連續方框切分成多個片段。換行處不會加上內距。使用 clone 時，每個片段都會有自己的內距、邊框和背景裝飾。W3C 定義了這兩種片段處理方式。

這個差異解釋了常見的結果：增加水平內距會讓整段文字的開頭和結尾更寬裕，但中間各行的邊緣看起來仍然很緊。缺少的設定控制換行處的呈現方式；單獨增加內距並不會改變這點。

請讓醒目顯示區維持為行內方框。區塊背景會裝飾其包含區域的矩形，而行內醒目顯示則會隨著文字流動。MDN 說明了區塊、行內和行內區塊方框在尺寸與間距上的不同表現。參閱 MDN 的方框模型指南。

在 Mac 上建立完整範例

在程式碼編輯器中建立名為 wrapped-highlight.html 的純文字檔，貼上下方的完整範例並儲存。接著在桌面瀏覽器中開啟此檔案。不需要安裝套件、外部樣式表或 JavaScript。

這個示範標題代表簡單的頁面介紹。一個 span 包住整段已裝飾的文字。WHATWG 將 span 元素定義為沒有自身語意的一般文字層級容器，因此適合用於這種純視覺上的分組。閱讀 HTML 標準對 span 的定義。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

將瀏覽器視窗縮窄，直到標題換行，再加寬視窗。檢查每一行醒目文字的開頭和結尾。預期結果是每一行都有獨立且帶內距的背景片段，且換行方式改變時，這種效果仍會維持。MDN 的範例使用相同的一組前綴宣告和標準宣告。參閱已記錄的語法與範例。

此處的尺寸僅供設計參考。如果兩端看起來太緊或太寬，請先調整水平內距 0.3em。再單獨調整垂直內距 0.08em。調整任一數值時，都請持續測試換行情況。

若要比較不同呈現方式，請暫時將兩個裝飾宣告都從 clone 改為 slice，然後儲存並重新載入。完成後，再將兩者還原為 clone。同時變更兩者，才能避免比較結果取決於瀏覽器辨識哪個宣告。

在 Mac 上需要注意哪些瀏覽器支援細節？

請在範例中保留兩個宣告。MDN 目前的相容性資料指出，標準屬性從 Chrome 130 和 Firefox 32 起受支援。Safari 則支援帶有 -webkit- 前綴的版本，而且該實作僅限行內元素。查看 MDN 的瀏覽器相容性資料。

這項行內限制適用於本指南的情境：跨文字行換行的字詞會形成行內片段。這不代表跨欄或列印頁面時，區塊片段也有同等支援。評估結果時，請分開考量這些版面情境。

請在與你的網頁相關的 Mac 瀏覽器中測試此檔案。先使用窄視窗和寬視窗，再放大頁面文字並重複測試。行數可能會改變；驗收條件是每個瀏覽器實際產生的片段都具有一致的內距。

如果環境無法辨識這兩個宣告中的任何一個，就無法使用逐行複製裝飾的增強效果。請確保文字和背景仍然清楚易讀；若單一矩形背景符合設計需求，也可以選用帶內距的區塊樣式。這會改變外觀，因此應作為明確的設計選擇。

如何避免背景重疊與不自然的換行？

內距和行距解決的是不同問題。在一般行內方框中，上下內距可以擴大背景繪製區域，卻不會讓周圍內容移開。因此，增加垂直內距可能會讓相鄰醒目文字行的背景重疊。MDN 明確記錄了行內方框的這項行為。參閱行內內距與周圍內容的說明。

請一併調整標題的 line-height 和醒目顯示區的垂直內距。範例刻意從較寬鬆的 1.65 起始值開始。若間距太大，請逐步調低，每次調整後都檢查最窄的版面。沒有一種間距值能適用於所有字型和裝飾。

若要找出問題原因，再繼續調整 CSS，請依照以下診斷順序：

觀察到的情況 優先檢查 接下來的做法
內距只出現在整段文字最外側的兩端 裝飾呈現方式 將 clone 的兩個宣告都套用至醒目顯示的行內元素。
背景是一大塊矩形 哪個元素擁有背景 將背景和內距放在內層行內 span 上。
醒目文字各行在垂直方向相接 垂直內距與父層行高 減少垂直內距，或增加行高。
長標籤超出容器範圍 可供換行的位置 考慮使用下方的選用長字串規則。
只有 Safari 沒有預期的行尾內距 前綴宣告 確認樣式表中仍有 -webkit-box-decoration-break: clone。

若像 AmberTileSequenceAmberTileSequence 這樣的示範標籤無法斷行，可以在 .sample-title 加入 overflow-wrap: anywhere。這是選用的 CSS 片段，請加在現有規則內；其餘範例維持不變。

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

這會讓原本無法斷行的字串在需要避免溢位時可以換行，但不會插入連字號。它解決的是可換行的位置問題，不會產生內距。含有空格的一般詞組可能不需要這項設定。MDN 說明了 overflow-wrap 的適用條件。

也請考慮背景本身的呈現方式。使用 clone 時，背景會在每個片段上分別繪製，因此漸層或背景圖片可能會在每一行重新開始。若希望醒目背景顏色一致，不要重複圖片圖樣，請使用純色。W3C 說明了片段背景會個別繪製的情況。

保持文字自然流動並留意字形塑造邊界

請用一個包覆整段目標文字的 wrapper，而不要依照目前可見的行數建立多個 wrapper。這樣標記就不會受目前視窗寬度和字型選擇影響。

請勿將單字拆成多個帶內距的字元 span，以模擬這種效果。CSS 文字規範要求，當相鄰的排印字元單位之間有非零的行內軸內距、邊框或邊界時，字形塑造必須跨越行內邊界中斷。因此，單字內帶內距的邊界可能影響字形塑造。參閱 W3C 關於跨邊界字形塑造的規則。

針對這個標題，請在文字片語的邊界放置 wrapper，並保持其中的文字連續。這樣可以避免在片語內額外建立帶內距的邊界。但這不保證不同瀏覽器和字型會產生完全相同的字形或行尾位置；請檢查你預計使用的實際呈現結果。

如果專案使用 Tailwind CSS，該怎麼做？

在現有的 Tailwind 專案中，將 box-decoration-clone 加到已設定醒目背景和內距的行內元素上。Tailwind 目前的文件將此工具類別對應至 box-decoration-break: clone。其 box-decoration-slice 工具類別則會選用另一種行為。參閱 Tailwind 的 box-decoration-break 工具類別。

請保留純 CSS 範例中的瀏覽器需求：若需要支援 Safari，請檢查產生的樣式表是否包含前綴宣告；若沒有，請透過專案的自訂 CSS 加入。這個工具類別會選擇裝飾呈現方式，但不會消除瀏覽器實作上的限制。

不需要只為了這個效果而引入 Tailwind。完整的本機範例已包含所需的 CSS。

自訂醒目顯示能使用相同的內距嗎？

透過 ::highlight() 設定樣式的 CSS Custom Highlight API 範圍，其功能不同於經過樣式設定的行內元素。MDN 列出了允許使用的屬性，包括文字顏色、背景顏色和文字裝飾。內距和 box-decoration-break 不在允許使用的屬性之列。閱讀自訂醒目顯示的樣式限制說明。

若你能控制標記，且需要每一行換行文字都有實際內距，請使用上方示範的行內 wrapper。如果必須保留以範圍為基礎的醒目顯示且不使用 wrapper，請使用它所支援的顏色和裝飾屬性，並接受此 API 無法提供帶內距的片段方框。

若要讓頁面標題或字詞換行，請使用一個行內 wrapper，將背景和內距一併設在其中，並套用 clone 的兩個宣告。最後，測試不同寬度並檢查垂直間距。這些檢查能確認醒目顯示效果是否適用於實際文字流動，而非只在某個剛好合適的視窗尺寸下正常運作。

來源