1. 程式人生 > >css - 單詞的自動換行問題

css - 單詞的自動換行問題

文檔 一行 強制換行 但是 orm url break word 方案

轉載自:解決文檔中有url鏈接時被強制換行的問題

問題

當行內出現很長的英文單詞或者url的時候,會出現自動換行的問題,為了美化頁面,往往會希望這些很長的英文單詞或者url能夠斷開來,超出的部分換行到下一行。

解決方案

可以通過使用兩個屬性來實現該需求:

word-wrap:break-word;
word-break:break-all;

word-wrap

word-wrap用來控制換行,有兩種取值:
  normal
  break-word(此值用來強制換行,內容將在邊界內換行,中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。)

word-break

word-break

用來控制斷詞,有三種取值:
  normal
  break-all(是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。)
  keep-all(是指Chinese, Japanese, and Korean不斷詞,一句話一行,可以用來排列古詩喲~)

css - 單詞的自動換行問題