溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css中word-break和work-wrap有什么區別的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
word-break:【斷詞】
定義：規定自動換行的處理方法. 注：通過word-break使用，可以實現讓瀏覽器在任意位置換行。
語法：word-break: normal|break-all|keep-all;
| 默認值 | normal |
| 繼承性 | yes |
| 版本 | css3 |
| Javascript語法 | object.style.wordBreak="keep-all" |
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認的換行規則。 |
| break-all | 允許在單詞內換行。 |
| keep-all | 只能在半角空格或連字符處換行。 |
兼容性：
舉個栗子：
<span class="text-s">iIanishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>
.text-s {
display: inline-block;
width: 240px;
// word-break: keep-all;
}未設置word-break：
設置word-break:break-all;
設置word-break:keep-all;或者word-break:normal;
word-wrap:【換行】
定義：允許長單詞或 URL 地址換行到下一行。
語法:word-wrap: normal|break-word;
| 默認值： | normal |
|---|---|
| 繼承性： | yes |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.wordWrap="break-word" |
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點換行（瀏覽器保持默認處理）。 |
| break-word | 在長單詞或 URL 地址內部進行換行。 |
兼容性：
舉個栗子：【和上面一樣】
未設置word-wrap：
設置word-wrap:normal;
設置word-wrap:break-word;
對比上述栗子設置word-break:break-all;和word-wrap:break-word的差別
總結：
word-break:當行尾放不下一個單詞時，決定單詞內部怎么擺放 => 決定句子末尾放不下單詞時，單詞是否換行
break-all：強行擺放，擠不下剩下的就換下一行顯示。
keep-all：放不下，就另外起一行展示；如果還放不下就溢出顯示。
word-wrap：當行尾放不下時，決定單詞內是否允許換行 => 決定單詞內該怎么換行
normal：單詞太長，換行顯示，在超過一行就溢出顯示。
break-word：當單詞太長時，先嘗試換行；換行后還是太長，單詞內還可以換行。
附加一個：文字兩端對齊
屬性：text-align:justify;
兼容性：十分不好
text-align:center;
text-align:justify;
感謝各位的閱讀！關于“css中word-break和work-wrap有什么區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
