如何實(shí)現(xiàn)文本換行
我們大概用的最多的就是超出文本顯示點(diǎn)點(diǎn)點(diǎn)這個(gè)效果了：
<head><style>.box {width: 100px;background: pink;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}style>head><body><div class="box">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字div>body>
white-space
我們?cè)俅位仡櫼幌?white-space 屬性的作用，white-space CSS 屬性是用來(lái)設(shè)置如何處理元素中的空白。注意哦！是用來(lái)設(shè)置空白的，那么什么是空白呢？也就是電腦按下空格鍵出來(lái)的空白，或者電腦按下tab鍵，再或者電腦按下enter鍵回車(chē)換行。除了這些我們還 CSS 標(biāo)簽?
默認(rèn)情況下，連續(xù)的空白符會(huì)被合并，換行符會(huì)被當(dāng)作空白符來(lái)處理。
<body><div class="box">你好！我喜歡你。div>body>
代碼寫(xiě)了兩行，但是瀏覽器顯示出來(lái)只有一行：
如果也想顯示兩行怎么辦呢？那你就加個(gè) white-space: pre-wrap;
pre-wrap?屬性表示：連續(xù)的空白符會(huì)被保留。在遇到換行符或者
word-break
所以 pre-wrap 屬性通常是處理空白符的，不是用來(lái)?yè)Q行的，換行我們得用 word-break，你看下面圖片，有一個(gè)因?yàn)閱卧~太長(zhǎng)啦，直接超出容器元素。
用 CSS 屬性?word-break?指定怎樣在單詞內(nèi)斷行。
word-break: break-all;設(shè)置 break-all 可在任意字符間斷行。
word-wrap
除了這個(gè)設(shè)置換行的，我們還能想起 word-wrap 屬性。這個(gè)屬性是干嘛的呢？接下了就要分析這個(gè)屬性的作用。你看到上面圖片的問(wèn)題了沒(méi)，在任何地方都換行了，但是我第一行的單詞和第二行的單詞明明可以顯示，我只希望把第三行的那個(gè)最長(zhǎng)的單詞換行就可以，不想破壞其他行的顯示效果。
<head><style>.box {width: 288px;padding: 20px;text-align: start;border: solid 1px #a9a9a9;box-sizing: border-box;overflow-wrap: break-word;}style>head><body><div class="box">HonorificabilitudinitatibuscalifragilisticexpialidociousTaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu次の単語(yǔ)グレートブリテンおよび北アイルランド連合王國(guó)で本當(dāng)に大きな言葉div>body>
CSS 屬性?overflow-wrap?是用來(lái)說(shuō)明當(dāng)一個(gè)不能被分開(kāi)的字符串太長(zhǎng)而不能填充其包裹盒時(shí)，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。
注：word-wrap 屬性原本屬于微軟的一個(gè)私有屬性，在 CSS3 現(xiàn)在的文本規(guī)范草案中已經(jīng)被重名為 overflow-wrap。word-wrap 現(xiàn)在被當(dāng)作 overflow-wrap 的 “別名”。穩(wěn)定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語(yǔ)法。
總結(jié)
1.white-space 用來(lái)設(shè)置如何處理元素中的空白。2.word-break 指定怎樣在單詞內(nèi)斷行，可以在任意單詞換行。3.overflow-wrap（原名 word-wrap） 用來(lái)處理一個(gè)字符超出容器時(shí)這樣單詞換行。