編碼的世界 / 優質文選 / 生涯

CSS中最全的換行處理方式


2021年10月13日
-   

在Web頁面上常常可以看到某個元素內部有一個很長的單詞,元素的寬度不足以容納它。一個常見的現象就是有一個很長的URL。這會發生什麼呢?這取決於CSS,那麼CSS如何控制布局,以及CSS如何讓文本更合理的方式展示。
比如下圖的一種效果,在Web中是很常見的:

由於URL文本過長,已經超出容器的寬度,影響了整個視覺效果,甚至很多時候還會影響Web頁面的布局效果。
最暴力的做法就是在容器上添加overflow:hidden;,可以阻止文字(或其他任何東西)溢出容器。雖然這可以解決視覺上的效果,但它使文本變得不可訪問。在一些使用鼠標的桌面瀏覽器中,你可能可以連續三次單擊該行來選擇URL並複制它,但是你不能指望每個人都知道,或者在所有場景中都有可能這麼做。
溢出流在這裏也是自確的,因為這就是正在發生的事情。我們使用overflow:auto同樣可以處理溢出流,它會觸發一個水平滾動條。或許有的場景使用這種方案是合適的,但我想這不是一個普遍接受的解決方案。
接下來我們來看看怎麼將長文本換行,看看有哪些解決方式,或者更適合的方式。
解決方法:

接下來讓我們詳細講解幾個技巧:
word-break: break-all允許單詞在任何地方被打破(這裏所說的打破是強行折斷換行)。word-break屬性可以“解決”這個問題:著作權歸作者所有。

overflow-wrap: break-word

乍一看,它看起來很像word-break: break-all。在上面的演示中,仔細觀察URL,又並不像word-break:break-all一樣,把單詞pen打破pe
,真正的效果是在pen單詞末尾折斷換行。這樣的處理方式是我們更期待的一種。著作權歸作者所有。
如果一個單詞不能中斷,因此它會溢出,那麼它可以在任何地方斷開,以避免溢出。
hyphens:auto
hyphens屬性做了你可能會想到的事情,比如斷字中添加斷線(-)。連字符有時可以在URL和長單詞中使用,但不能保證。舉個例子,一個很長的數字會把它絆倒。此外,連字符會影響所有文字,更隨意地打破文字,以幫助文本均勻地貼在右邊。

如果一個單詞橫跨在一行的末尾,我們可以使用連字符將它們連接起來了。
line-break: anywhere
還有一個屬性叫做line-break。很明顯,這主要是為了標點符號,但我似乎無法在任何瀏覽器中看到它。
總結:這篇文章主要簡單的介紹了CSS中幾個處理超常文本溢出容器的處理方式。比如說,單詞被打破折斷換還;還是整個單詞在容器邊緣整體換行;或者說單詞打破,但打破處添加連接符-。雖然文章中提到過的幾個屬性能解決我們常見的場景,但對於一些特殊的場景還是要特殊考慮,尤其是長字符(特別是惡意長字符),上面的CSS屬性估計都無法能解決。

熱門文章