終於明白word-break屬性——break-all和break-word的區別
阿新 • • 發佈:2018-12-04
其實一直不明白,也沒有認真去想過 word-break 屬性的 break-all 和 break-word 有什麼區別
後來看了一個大神寫的一篇部落格,寫得很詳細,看了豁然開朗。
所以,我也就不在過多贅述,直接上demo,最後會附上原文連結
demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .div01,.div02 { width: 300px; } .div01 { word-break: break-all; } .div02 { word-break: break-word; } </style> </head> <body> <div class="div01">show me the money give me the money</div> <div class="div02">show me the money give me the money </div> </body> </html>
下面截圖是上面demo的執行結果
第一行的英文使用了:word-break: break-all;
第二行的英文使用了:word-break: break-word;
共同點:
都是可以對英文單詞進行斷句換行
不同點:
word-break:break-all 緊接著前面的單詞,並強行斷句換行(比如上面截圖中的 money 是緊跟著前面的 the)
word-wrap:break-word 不會緊接著前面的單詞,而是整個單詞直接另起一行 (比如上面截圖中的 money,沒有緊跟前面的 the,直接換行)
原文連結:https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html