1. 程式人生 > >word-break:break-all和word-wrap:break-word的區別

word-break:break-all和word-wrap:break-word的區別

最開始我們說了,word-wrap 是用來決定允不允許單詞內斷句的,如果不允許的話長單詞就會溢位。最重要的一點是它還是會首先嚐試挪到下一行,看看下一行的寬度夠不夠,不夠的話就進行單詞內的斷句。

而word-break:break-all則更變態,因為它斷句的方式非常粗暴,它不會嘗試把長單詞挪到下一行,而是直接進行單詞內的斷句。這也可以解釋為什麼說它的作用是決定用什麼方式來斷句的,那就是——用了word-break:break-all,就等於使用粗暴方式來斷句了。總之一句話,如果您想更節省空間,那就用word-break:break-all就對了!

但無論如何,單詞內的斷句都會對西文的可讀性產生一定的影響,有時候這點就要注意了。

ps:網上有些文章說,word-wrap:break
-word 對長串英文不起作用,其實這是非常錯誤的,word-wrap:break-word照樣能把一個長串英文或數字拆成多行。事實上,word-wrap:break-word與word-break:break-all共同點是都能把長單詞強行斷句,不同點是word-wrap:break-word會首先起一個新行來放置長單詞,新的行還是放不下這個長單詞則會對長單詞進行強制斷句;而word-break:break-all則不會把長單詞放在一個新行裡,當這一行放不下的時候就直接強制斷句了。