文章裡貼了一條長網址，閱讀區卻被它撐出螢幕。先分清是文字沒有可用斷點，還是容器本身寫死寬度；兩種原因看起來相似，修改位置不同。
要讓讀者看完整網址，通常不必截成省略號，也不用改寫連結目的地。可以保留全文，允許瀏覽器在必要位置換行。本篇比較overflow-wrap與word-break，處理的是可讀文字，不是縮短網址或更改URL結構。
先選中那條連結，查看真正生效的規則
在開發者工具檢查連結與外層段落。若有white-space:nowrap，先確認它是不是標題截斷或按鈕樣式被誤套到正文。nowrap會禁止通常的文字換行，不能只增加一條overflow-wrap就假定所有限制都已消失。
再看外層的width、min-width與padding。容器固定比畫面寬，文字就算可以換行，頁面仍然可能溢出。若放在grid或flex項目中，也可能受到項目最小尺寸限制；先找到被撐大的那一層，再處理文字。
只在需要時拆開長字串
overflow-wrap:anywhere允許原本沒有合適斷點的字串，在必要時於任意位置換行，以免超出行盒。它不會在每個單字中間都強制斷開；正常句子仍先使用通常可用的斷點。
.article-content a {
overflow-wrap: anywhere;
}把選取器縮到需要的正文範圍。導覽、按鈕或工具列可能另有排版要求，沒有必要為一條正文網址把全站所有元素的文字都強制換行。修改前儲存原規則，避免覆蓋其他區塊。
這張圖來自自有HTML頁的桌面瀏覽器。三區使用同一條網址、同樣寬度與字體，方便觀察規則差異；不是某款網站主題的設定畫面。
break-all會更積極地拆字
word-break:break-all允許在非中日韓文字的字元之間斷行，即使把完整單字移到下一行也放得下，仍可能先拆開它。這能讓字串塞進窄區，卻可能把一般英文說明切得難讀。
因此不要看到長網址就先把整篇文章設成break-all。正文同時有網址、英文產品名與中文說明時，先試overflow-wrap:anywhere，再看真正需要的範圍。若個別代碼或字串有特別需求，可以對那個元素安排規則。
word-break:keep-all也不是長網址修復工具。它對中日韓文字的斷行方式有不同作用，可能讓中文段落失去平常的換行機會。選規則時看內容種類與讀者任務，不要只憑名稱猜效果。
anywhere與break-word還有尺寸差別
overflow-wrap:break-word也能在必要時拆開不可斷的字串，但這些新增斷點不參與min-content內在尺寸的計算；anywhere的斷點會參與。放進會考慮內容最小尺寸的格線或彈性版面，兩者因此可能產生不同的寬度結果。
如果文章已套break-word，文字區仍被撐大，不要直接判斷瀏覽器不支援換行。核對是哪個容器在計算最小尺寸，並比較anywhere或項目min-width:0是否符合版型。這需要看實際結構，不能只在連結上不停增加規則。
本文沒有把word-break:break-word當作推薦方案。它的歷史相容行為與overflow-wrap並非同一個屬性；新修改用清楚的屬性與值，維護時比較容易判斷到底在處理斷行還是內在尺寸。
畫面換行，不要偷偷改網址
CSS換行不會把href改成兩段地址。可見文字與連結目的地本來就是兩個部分：畫面允許分行，連結仍指向原本完整的URL。修正後仍要點一次，確認真正目的地沒有被編輯器改壞。
不要為了排版在href裡插入空格或換行，也不要把網址中的百分號編碼手動拆成別的字元。若顯示文字加了可選斷點，複製結果也要檢查，避免讀者得到帶額外字元的地址。
最簡單的做法是保留原始文字，只用CSS調整換行。複製連結地址與複製可見文字各試一次，比較是否與原URL相同；若文章工具會在貼上時自動轉換內容，也核對儲存後的HTML。
程式碼與表格不必用同一種處理
文章網址通常適合完整換行；程式碼可能需要保留縮排或看完整一行，表格則要保留欄位關係。不要把正文的換行規則擴到所有pre、表格或下載清單，造成另一種閱讀問題。
如果選擇讓程式碼視覺換行，確認複製的textContent仍保留原始字元與換行，沒有把畫面上的自動斷行變成額外換行。需要橫向捲動的區塊，也應只捲動自己，避免整個頁面被撐寬。
用長網址與正常段落一起驗
選一條真正會出問題的長地址，再放一段普通英文與中文說明。修正後查看網址是否留在閱讀區、正常單字是否被過度拆開，然後逐步縮窄容器。不要只挑一條剛好有很多斜線、很容易斷行的地址就算完成。
檢查連結能否使用、鍵盤焦點是否看得見，文字是否被overflow:hidden裁掉。沒有橫向溢出，不代表內容完整；省略號或裁切可能只是把問題藏起來。
最後儲存修改前後的選取器、容器寬度與代表地址。若其他頁仍出問題，先比較結構和生效規則，而不是把同一條!important到處貼。換行處理能改善閱讀區的排版，沒有改變地址本身，也不代表搜尋引擎已重新處理頁面。
評論0