淺析word-break work-wrap的區(qū)別
我要評(píng)論word-break:【斷詞】
定義：規(guī)定自動(dòng)換行的處理方法. 注：通過(guò)word-break使用，可以實(shí)現(xiàn)讓瀏覽器在任意位置換行。
語(yǔ)法：word-break: normal|break-all|keep-all;
| 默認(rèn)值 | normal |
| 繼承性 | yes |
| 版本 | css3 |
| Javascript語(yǔ)法 | object.style.wordBreak="keep-all" |
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認(rèn)的換行規(guī)則。 |
| break-all | 允許在單詞內(nèi)換行。 |
| keep-all | 只能在半角空格或連字符處換行。 |
兼容性：
舉個(gè)栗子：
- <span class="text-s">iIanishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>
- .text-s {
- display: inline-block;
- width: 240px;
- // word-break: keep-all;
- }
未設(shè)置word-break：
設(shè)置word-break:break-all;
設(shè)置word-break:keep-all;或者word-break:normal;
word-wrap:【換行】
定義：允許長(zhǎng)單詞或 URL 地址換行到下一行。
語(yǔ)法:word-wrap: normal|break-word;
| 默認(rèn)值： | normal |
|---|---|
| 繼承性： | yes |
| 版本： | CSS3 |
| JavaScript 語(yǔ)法： |
object.style.wordWrap="break-word" |
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。 |
| break-word | 在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。 |
兼容性：
舉個(gè)栗子：【和上面一樣】
未設(shè)置word-wrap：
設(shè)置word-wrap:normal;
設(shè)置word-wrap:break-word;
對(duì)比上述栗子設(shè)置word-break:break-all;和word-wrap:break-word的差別
總結(jié)：
word-break:當(dāng)行尾放不下一個(gè)單詞時(shí)，決定單詞內(nèi)部怎么擺放 => 決定句子末尾放不下單詞時(shí)，單詞是否換行
break-all：強(qiáng)行擺放，擠不下剩下的就換下一行顯示。
keep-all：放不下，就另外起一行展示；如果還放不下就溢出顯示。
word-wrap：當(dāng)行尾放不下時(shí)，決定單詞內(nèi)是否允許換行 => 決定單詞內(nèi)該怎么換行
normal：?jiǎn)卧~太長(zhǎng)，換行顯示，在超過(guò)一行就溢出顯示。
break-word：當(dāng)單詞太長(zhǎng)時(shí)，先嘗試換行；換行后還是太長(zhǎng)，單詞內(nèi)還可以換行。
附加一個(gè)：文字兩端對(duì)齊
屬性：text-align:justify;
兼容性：十分不好
text-align:center;
text-align:justify;
以上這篇淺析word-break work-wrap的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
CSS word-wrap同word-break的區(qū)別
本文列舉了兼容 IE 和 FF 的換行 CSS 推薦樣式，詳細(xì)介紹了word-wrap同word-break的區(qū)別。2010-01-17CSS的Word_break、Word_Wrap的區(qū)別及應(yīng)用
文本布局經(jīng)常出現(xiàn)換行混亂的情況，下面為大家介紹下有關(guān)css屬性Word_break、Word_Wrap的區(qū)別及應(yīng)用，希望對(duì)大家有所幫助2014-05-27word-break:break-all和word-wrap:break-word區(qū)別總結(jié)
word-break:break-all和 word-wrap:break-word有哪些區(qū)別呢？?jī)烧叨寄苁蛊淙萜魅鏒IV的內(nèi)容自動(dòng)換行，本文羅列了一些它們之間的區(qū)別，感興趣的朋友可以參考下2014-05-13