強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些-創(chuàng)新互聯(lián)
這篇文章主要講解了“強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些”吧！
強(qiáng)制換行與強(qiáng)制不換行用到的屬性
我們一般控制換行所用到的CSS屬性一共有三個(gè)：word-wrap; word-break; white-space。這三個(gè)屬性可以說(shuō)是專為了文字?jǐn)嘈卸鴦?chuàng)造出來(lái)的。首先我們得知道這三個(gè)屬性到底是做什么用地：
word-wrap語(yǔ)法：
word-wrap: normal(默認(rèn)) | break-word
各個(gè)瀏覽器均能識(shí)別
參數(shù)：
normal: 允許內(nèi)容頂開(kāi)指定的容器邊界。
break-word: 內(nèi)容將在邊界內(nèi)換行。必要時(shí)會(huì)觸發(fā)word-break（注意：請(qǐng)分辨清楚word-break和break-word這倆個(gè)是不同的東西，一為屬性另為參數(shù)）。
說(shuō)明：
word-wrap是控制是否“為詞斷行”的，設(shè)置或檢索當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行。中文沒(méi)有任何問(wèn)題，英文語(yǔ)句也沒(méi)問(wèn)題。但是對(duì)于長(zhǎng)串的英文，就不起作用。
范例：
congratulation這個(gè)單詞屬于長(zhǎng)串英文，word-wrap:break-word整個(gè)單詞看成一個(gè)整體，如果該行末端寬度不夠顯示整個(gè)單詞，它會(huì)自動(dòng)把整個(gè)單詞放到下一行，而不會(huì)把單詞截?cái)?，這就是對(duì)于長(zhǎng)串文字不起作用的解釋。word-wrap:normal是默認(rèn)情況，英文單詞不被拆開(kāi)。
結(jié)論：
作用范圍僅為div這類標(biāo)準(zhǔn)塊級(jí)元素，th,td這類table元素雖然識(shí)別但是沒(méi)有效果（如果為td,th加上寬度word-wrap在IE下是能夠發(fā)揮效果的，但根據(jù)完全兼容性方便記憶角度上來(lái)說(shuō)還是以前面的結(jié)論為準(zhǔn)）。
word-break語(yǔ)法：
word-break: normal(默認(rèn)) | break-all | keep-all
Firefox、Opera不能識(shí)別
參數(shù)：
normal: 依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行。
break-all: 該行為與亞洲語(yǔ)言的normal相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本。
keep-all: 與所有非亞洲語(yǔ)言的normal相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本。
說(shuō)明：
word-break:break-all，是斷開(kāi)單詞。在單詞到邊界時(shí)，下個(gè)字母自動(dòng)到下一行。主要解決了長(zhǎng)串英文的問(wèn)題（恰恰彌補(bǔ)了上面word-wrap:break-word對(duì)于長(zhǎng)串文字不起作用的缺陷）。
范例：
繼續(xù)以上面congratulation這個(gè)單詞屬于長(zhǎng)串英文，word-break:break-all它會(huì)把單詞截?cái)?，該行末端就?huì)變成類似conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí)，不用word-wrap，中文就不會(huì)換行了。（英文語(yǔ)句正常。）
結(jié)論：
作用范圍僅為div這類標(biāo)準(zhǔn)塊級(jí)元素，th,td這類table元素雖然識(shí)別但是沒(méi)有效果（經(jīng)測(cè)試Chrome下word-break:break-all是有效果的，但根據(jù)完全兼容性方便記憶角度上來(lái)說(shuō)還是以前面的結(jié)論為準(zhǔn)）。Firefox,Opera是無(wú)法識(shí)別word-break的，更不用提Firefox下的th,td中使用word-break的效果了。
white-space語(yǔ)法：
white-space: normal(默認(rèn)) | pre | nowrap
參數(shù)：
normal: 默認(rèn)。空白會(huì)被瀏覽器忽略。
pre: 空白會(huì)被瀏覽器保留。其行為方式類似HTML中的pre標(biāo)簽。
nowrap: 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到br標(biāo)簽為止。
說(shuō)明：
對(duì)于pre屬性，其實(shí)就是HTML中連續(xù)的多個(gè)空白符會(huì)被合并，然后為了不讓他合并（最常用的場(chǎng)合就是表示代碼文字縮進(jìn)）讓其中的空白符繼續(xù)保留而不需要我們?cè)黾宇~外的樣式和標(biāo)簽來(lái)控制它的縮進(jìn)和換行。pre標(biāo)簽的原理也是一樣的內(nèi)部默認(rèn)有了個(gè)white-space:pre。
對(duì)于nowrap屬性，這個(gè)是強(qiáng)制不換行核心，一般強(qiáng)制不換行就是利用這個(gè)屬性。Firefox的div和td中，以及IE的div中，均沒(méi)有問(wèn)題。的瑕疵就是在IE的td中會(huì)有一個(gè)問(wèn)題，如果td沒(méi)有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無(wú)標(biāo)點(diǎn)、無(wú)空格（例如中文長(zhǎng)串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問(wèn)題。
總結(jié)強(qiáng)制換行：
如果在div這類標(biāo)準(zhǔn)塊級(jí)元素中需要強(qiáng)制換行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺點(diǎn)就是會(huì)導(dǎo)致如果恰巧該行末端寬為一個(gè)長(zhǎng)串英文單詞，那么該單詞會(huì)被撕開(kāi)的尷尬樣式(而且FF不識(shí)別word-break，反而不會(huì)撕開(kāi)這個(gè)單詞)。個(gè)人認(rèn)為如果你這個(gè)div里面放的類似于URL這個(gè)長(zhǎng)串地址，那么用此方案是非常不錯(cuò)的選擇（注意：由于FF不識(shí)別word-break，所以無(wú)法保證每行末端會(huì)整齊的斷開(kāi)URL單詞，但這也是無(wú)奈的選擇）。如果不是放置URL這類可以斷開(kāi)的長(zhǎng)串英文，而是英文句子的話，那么使用word-wrap:break-word;即可。至于網(wǎng)上看到有word-wrap:break-word; overflow:hidden;這么個(gè)寫(xiě)法，據(jù)說(shuō)可以兼容IE和FF，但經(jīng)過(guò)親自測(cè)試似乎沒(méi)有什么特別效果。當(dāng)然，如果你有更好的方案也可以留言參與討論，這里也十分歡迎您的意見(jiàn)。
如果是在td,th這類table元素中需要強(qiáng)制換行，個(gè)人比較推薦的方式為：先為table設(shè)定table-layout:fixed，至于為什么要設(shè)定這個(gè)屬性可參考我的《拿什么來(lái)拯救你，我的Table》這篇文章，里面有比較詳細(xì)的說(shuō)明。基本上設(shè)定完這個(gè)屬性后基本的換行問(wèn)題都能夠解決而不會(huì)出現(xiàn)table中td,th因?yàn)槔锩娓鱾€(gè)內(nèi)容的多寡發(fā)生搶奪其他td,th寬度的情形發(fā)生。這時(shí)如果你依舊有強(qiáng)制換行問(wèn)題，那么在此td中內(nèi)部加一層div，那么情況就會(huì)像上面討論的方式來(lái)解決。
總結(jié)強(qiáng)制不換行：
強(qiáng)制不換行的問(wèn)題到是比較容易分析的，就如上面所討論的那樣使用white-space:nowrap，F(xiàn)irefox的div和td中，以及IE的div中，均沒(méi)有問(wèn)題。的瑕疵就是在IE的td中會(huì)有一個(gè)問(wèn)題，如果td沒(méi)有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無(wú)標(biāo)點(diǎn)、無(wú)空格（例如中文長(zhǎng)串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問(wèn)題。綜合下來(lái)，比較穩(wěn)妥的方式是在文字與td之間再套一層div，然后使用nowrap，那么就是強(qiáng)制不換行。注意這時(shí)候很有可能文字會(huì)過(guò)多導(dǎo)致溢出容器，所以你還得加一個(gè)overflow:hidden，防止溢出容器，這樣子就可以兼容各個(gè)瀏覽器了。
感謝各位的閱讀，以上就是“強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
文章名稱：強(qiáng)制換行與強(qiáng)制不換行的區(qū)別有哪些-創(chuàng)新互聯(lián)
標(biāo)題URL：http://m.jiaotiyi.com/article/pegij.html