css之word-break及word-wrap(overflow-wrap)
目錄
一、介紹
今天學習markdown時，遇到了一個概念，“hard-wrapped”，然後網上搜索，發現一堆名詞，如：line break、word wrapping、word wrap、line wrap？？？啥東東？頭都大了。最後發現它們只是概念模糊，但是想表達的無非就是軟換行和硬換行。軟換行有兩種方式，其中就是自動換行，自動換行涉及到一個word-wrap的概念。word-wrap指的是內容要超出該行範圍時，具體如何換行。
接下來討論的就是css中的word-break和word-wrap（overflow-wrap）樣式，如果不懂的，先了解一下換行的概念，請參考我的部落格：
至於其他的比如hyphens 樣式，這裡不討論了，畢竟中文環境下，用不到了吧。。
二、word-break
html中文字可以自動換行，而word-break則規定哪裡自動換行，word-break預設normal，下面給出所有取值：
| Value | Description |
|---|---|
| normal | Default value. Uses default line break rules |
| break-all | To prevent overflow, word may be broken at any character |
| keep-all | Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"。也就是中文不自動換行了，而英文使用預設換行方式 |
| break-word | To prevent overflow, word may be broken at arbitrary points。這是不是標準化的值，因此才會出現word-break（overflow-wrap） |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. Read about inherit |
2.1、normal
使用預設值，那麼會預設在word（漢字）或者標點符號後換行。但是對於英文來說，有些單詞很長以至於即使換行也容納不下時，還是會溢位的。而漢字也就佔兩個位元組，還是放得下的。
2.2、break-all
對於中文沒啥影響，英文的話，如果溢位時可以在任何地方換行，包括在單詞內的某個位置換行。下圖已用不同顏色標註了3個單詞，發現快溢位時就換行了，不管是在什麼位置。
2.3、keep-all
中文不自動換行，英文表現出和normal一樣的行為
2.3、break-word
可以發現，normal模式下，單詞過長會溢位，但是break-word模式下，單詞過長就在單詞內換行。注意，該值未列入標準。
三、overflow-wrap
overflow-wrap原先名做word-wrap，後被改名為overflow-wrap，word-wrap作為別名。預設normal值，可選break-word，就是因為word-break的break-word未列入標準，才會一般使用overflow-wrap的break-word值。效果和word-wrap的break-word一樣。