css屬性：word-wrap:break-word; 與 word-break:break-all 的用法；

zhangq0123

於 2016-10-19 11:06:12 釋出

6475
收藏 9
分類專欄： CSS HTML 文章標籤： html css
版權

CSS
同時被 2 個專欄收錄
8 篇文章0 訂閱
訂閱專欄

HTML
4 篇文章0 訂閱
訂閱專欄
前言：在一個長寬固定的div容器中，多行文字和英文句子都預設自動換行。不過，對於英語單詞而言，會有一些微妙的變化！

//沒有新增word-wrap:break-word和word-break:break-all時

<div style="width:150px;height:70px;background:red;">
I am a good boy, hahahahhahahahahahaha everyone likes me...
</div>

//新增word-wrap:break-word時(只對那些超出容器寬度的單詞進行拆分，而不影響其他正常單詞。)

<div style="width:150px;height:70px;background:red;word-wrap:break-word">
I am a good boy, hahahahhahahahahahaha everyone likes me...
</div>

//新增word-break:break-all時(拆分所有單詞)

<div style="width:150px;height:70px;background:red;word-break:break-all">
I am a good boy, hahahahhahahahahahaha everyone very likes me...
</div></span>

————————————————
版權宣告：本文為CSDN博主「zhangq0123」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/zhangq0123/article/details/52857092