部落格被 Google Search Console 糾正部分排版不適合行動裝置閱讀。

檢視問題頁面研判是文章出現過長英文字串超出邊框,造成文章區塊變窄造成。導致問題的文字通常是 Namespace 加型別名稱,URL、檔案路徑等,共同特色是長度長且其中不包含空白或標點符號:

thumbnail

解決這類問題,腦海中只有一招強制斷字換行 CSS word-break: all

thumbnail

文字依容器寬度切齊了,但英文斷得慘不忍睹,RSClie...Client,WebContr...ol.aspx,Repo...rtViewer.js,OpT...ype,這種切法應該沒人能接受。

心想這算常見需求,應有更完善的解法,試了一下,找到 word-wrap: break-word

thumbnail

在上圖案例中,連續無空白文字允許從「.」「?」等符號斷開換行,避免撐開寬度。但依寬度及文字匹敵,英文單字仍可能會被硬切(如下圖黃底),與完全不折行或 break-all 亂切一通相比,這結果雖不完美,已可被接受。

寫這篇文章找資料時爬到自己的舊文,發現自己 11 年前就知道它了,但當時的結論是「word-wrap 是 IE Only」,故腦海只記下 word-break: all。如今幾乎所有瀏覽器都已支援 word-wrapMDN 文件提到這個微軟發明的規格後來被納入 CSS3 規範並重新命名為 overflow-wrap,但保留 word-wrap 做為別名,故更正統寫法應該是 overflow-wrap: break-word

Tips of using overflow-wrap: break-word to wrap long strings in web page.


Comments

Be the first to post a comment

Post a comment


67 - 18 =