CSS3中的word-wrap雏婶、word-break过椎、white-space想必大家都接觸過忆肾，今天我們來一起溫故而知新荸频。
當(dāng)我們在網(wǎng)站編輯文章的時候難免會遇到文字過長導(dǎo)致溢出的情況，仔細觀察會發(fā)現(xiàn)是我們的CSS沒加文字截斷客冈，然后加上word-break:break-all就搞定了旭从。下面給大家介紹CSS3中控制文字換行的三個屬性:
一、word-wrap
1场仲、定義
word-wrap 屬性允許長單詞或 URL 地址換行到下一行和悦。
2、語法和參數(shù)
word-wrap：normal（默認）|break-word normal：允許內(nèi)容頂開指定的容器邊界渠缕，如果單詞超長鸽素，會沖出邊界（在當(dāng)前行顯示，不會換行）亦鳞。 break-word： 內(nèi)容將在邊界內(nèi)換行馍忽，當(dāng)單詞在當(dāng)前行放不下時棒坏，會自動切換到下一行，必要時會觸發(fā)word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西遭笋，一為屬性另為參數(shù)）坝冕。 注：各個瀏覽器均能識別。
3瓦呼、說明
word-wrap是控制是否“為詞斷行”的喂窟，設(shè)置或檢索當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。中文沒有任何問題央串，英文語句也沒問題磨澡。但是對于長串的英文，就不起作用蹋辅。
4钱贯、例子
congratulation這個單詞屬于長串英文，word-wrap:break-word整個單詞看成一個整體侦另，如果該行末端寬度不夠顯示整個單詞秩命，它會自動把整個單詞放到下一行，而不會把單詞截斷褒傅，這就是對于長串文字不起作用的解釋弃锐。word-wrap:normal是默認情況，英文單詞不被拆開殿托。
5霹菊、總結(jié)
作用范圍僅為div這類標準塊級元素，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發(fā)揮效果的支竹，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準）旋廷。
二、word-break
1礼搁、定義
word-break 屬性規(guī)定自動換行的處理方法饶碘。 提示：通過使用 word-break 屬性，可以讓瀏覽器實現(xiàn)在任意位置的換行馒吴。
2扎运、語法和參數(shù)
word-break： normal（默認）|break-all|keep-all normal：依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行：中文則到邊界處的漢字換行饮戳，英文則整個單詞換行豪治，如果出現(xiàn)某個單詞長度過長，則會撐破容器扯罐，如果邊框為固定屬性负拟，則后面部分將無法顯示。 break-all：可以強行截斷英文單詞歹河，強行換行齿椅。該行為與亞洲語言的normal相同琉挖。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本涣脚。 keep-all：與所有非亞洲語言的normal相同。對于中文寥茫，韓文遣蚀，日文，不允許字斷開纱耻。即如果是中文芭梯，將把前后標點符號內(nèi)的一個漢字短語整個換行，英文單詞也整個換行弄喘。 注：Firefox玖喘、Opera不能識別。
3蘑志、說明
word-break:break-all累奈，是斷開單詞。在單詞到邊界時急但，下個字母自動到下一行澎媒。主要解決了長串英文的問題（恰恰彌補了上面word-wrap:break-word對于長串文字不起作用的缺陷）。
4波桩、例子
繼續(xù)以上面congratulation這個單詞屬于長串英文戒努，word-break:break-all它會把單詞截斷，該行末端就會變成類似conra(congratulation的前端部分)镐躲，下一行為tulation（conguatulation）的后端部分了储玫。 word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞萤皂。即只用此時撒穷，不用word-wrap，中文就不會換行了敌蚜。（英文語句正常桥滨。）
5、總結(jié)
作用范圍僅為div這類標準塊級元素弛车，th,td這類table元素雖然識別但是沒有效果（經(jīng)測試Chrome下word-break:break-all是有效果的齐媒，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準）。Firefox,Opera是無法識別word-break的纷跛，更不用提Firefox下的th,td中使用word-break的效果了喻括。
三、white-space
1贫奠、定義
word-spacing 屬性增加或減少單詞間的空白（即字間隔）唬血。 該屬性定義元素中字之間插入多少空白符望蜡。針對這個屬性，“字” 定義為由空白符包圍的一個字符串拷恨。如果指定為長度值脖律，會調(diào)整字之間的通常間隔；所以腕侄，normal 就等同于設(shè)置為 0小泉。允許指定負長度值，這會讓字之間擠得更緊冕杠。 注釋：允許使用負值微姊。
2、語法和參數(shù)
white-space：normal | nowrap | pre-wrap | pre-line | inherit normal：默認分预，空白符會被瀏覽器忽略兢交。 nowrap：文本不會換行，文本會在在同一行上繼續(xù)笼痹，直到遇到
標簽為止配喳。 pre-wrap：保留空白符，但是正常地進行換行与倡。 pre-line：合并空白符界逛，但是保留換行符。 inherit：繼承父元素的設(shè)置 注：各個瀏覽器均能識別纺座。
3息拜、說明
對于pre屬性，其實就是HTML中連續(xù)的多個空白符會被合并净响，然后為了不讓他合并（最常用的場合就是表示代碼文字縮進）讓其中的空白符繼續(xù)保留而不需要我們增加額外的樣式和標簽來控制它的縮進和換行少欺。pre標簽的原理也是一樣的內(nèi)部默認有了個white-space:pre。 對于nowrap屬性馋贤，這個是強制不換行核心赞别，一般強制不換行就是利用這個屬性。Firefox的div和td中配乓，以及IE的div中仿滔，均沒有問題。唯一的瑕疵就是在IE的td中會有一個問題犹芹，如果td沒有指定寬度崎页，則nowrap仍然有效，如果td有寬度腰埂，并且文字中無標點飒焦、無空格（例如中文長串文字），nowrap則不再有效屿笼。解決方式就是可以加word-break:keep-all;可以解決此問題牺荠。
你還在找3W的資料嗎翁巍，如上可以讓你清晰明了掌握它。
如果想要學(xué)習(xí)更多關(guān)于前端的干貨休雌，請進我Q群詳聊：142991222灶壶，我們悄悄說。大家多多支持杈曲，多多轉(zhuǎn)發(fā)例朱，多多吐糟，才讓我更有動力去多多分享鱼蝉。
