CSS換行 word-break word-wrap 的了解

​

word-break: normal; // 此值為浏覽器的預設屬性：以單詞為機關；keep-all 這個值由于相容性差，很少用；
word-wrap: normal; // 此值為浏覽器的預設屬性：以單詞為機關；      

純中文：自動換行，一個漢字看做一個單詞；

純英文或純數字：看做一個單詞，不換行；

遇到英文空格或者換行符：會換行；

遇到英文單詞和英文空格：在空格處換行且不會斷單詞；

word-break: break-all; // 此值表示 單詞也要換行，都要換行；      

純中文：自動換行，一個漢字看做一個單詞；

純英文或純數字：直接把單詞截斷換行；

遇到英文空格或者換行符：會換行；

遇到英文單詞和英文空格：在空格處換行截斷單詞；

word-wrap: break-word; // 此值表示 純單詞超過長度會截斷換行，其他的單詞不會；      

純中文：自動換行，一個漢字看做一個單詞；

純英文或純數字：直接把單詞截斷換行；

遇到英文空格或者換行符：會換行；

遇到英文單詞和英文空格：在空格處換行不截斷單詞；

換行範圍：

word-break: break-all; > word-wrap: break-word; > word-break: normal; word-wrap: normal;      

總結：

1：浏覽器預設是以單詞為機關進行換行的，單詞不可拆分，擠不下會另起一行；一個漢字為一個單詞；

2：word-break: break-all 此值表示 超出的時候都要換行，是單詞要拆分；

3：word-wrap: break-word 此值表示 如果一個單詞超出行長度，要截取換行，其他預設；

4：word-break: normal; word-wrap:normal 此值表示 浏覽器的預設行為，也就是第 1 點；

學習更多技能

請點選下方公衆号

​