網頁版面網址或文字太長強制自動換行

在Google網站管理員後台,看到行動裝置可用性出現錯誤,使用行動裝置相容性測試工具測試發現,原來是網址太長超出版面。

行動裝置可用性錯誤

為了避免英文字從中斷開換行,參考〈【笨問題】CSS超長文字斷行〉裡的語法來修改。開啟Hexo Light主題的/themes/light/source/css/_partial/article.styl,搜尋:

1
2
3
4
5
.entry
text-align justify
line-height 1.6
p, blockquote, ul, ol, dl, table, iframe, h3, h4, h5, h6, .video-container
margin-top 15px

改成:

1
2
3
4
5
6
.entry
text-align justify
line-height 1.6
overflow-wrap: break-word;
p, blockquote, ul, ol, dl, table, iframe, h3, h4, h5, h6, .video-container
margin-top 15px

再用行動裝置相容性測試工具測試無誤後,到Google網站管理員後台去修正,等待更新。

行動裝置可用性錯誤驗證通過