我們先看看不加任何屬性是如何換行處理的
下面各類屬性都是加在一個(gè)p元素上的。
p {
width: 300px;
padding: 5px;
background-color: #f0f3f9;
font-size: 14px;
}
我們看到不加任何屬性時(shí)候，邊界遇到中文自動(dòng)換行。英文需要有空格才會(huì)換行。如果一個(gè)單詞長(zhǎng)到一行都無法顯示完全的話，這個(gè)單詞則不會(huì)進(jìn)行換行，而是溢出顯示。
word-break
word-break: normal; //使用默認(rèn)的換行規(guī)則。
word-break: break-all; //允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
word-break: keep-all;//不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字
符處換行。非CJK文本的行為實(shí)際上和normal一致。
word-break:break-all
我們看到word-break:break-all就是非常暴力的遇見什么折斷什么的方式進(jìn)行換行。
word-break: keep-all
我們可以看到中文在沒有遇到半角空格或連字符時(shí)，是不進(jìn)行換行的。而非CJK文本的行為表現(xiàn)和normal一致。
word-wrap
word-wrap: normal;
word-wrap: break-word;//一行單詞中實(shí)在沒有其他靠譜的換行點(diǎn)的時(shí)候換行。
僅用于塊對(duì)象，內(nèi)聯(lián)對(duì)象要用的話，必須要設(shè)定height、width或display:block或position:absolute。
word-wrap: break-word
word-wrap:break-word則帶有憐憫之心，如果這一行文字有可以換行的點(diǎn)，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的，則就不打英文單詞或字符的主意了，讓這些換行點(diǎn)換行。如果沒有其他可以換行的符號(hào)空格等再折斷單詞進(jìn)行換行。
記憶方法word-wrap: break-word 和 word-break:break-all
有兩個(gè)break的就是很強(qiáng)硬的斬?cái)嘁磺械摹Ｖ挥幸粋€(gè)break的相對(duì)比較溫和。先看空格之類的換行符。
white-space
white-space是字符是否換行顯示的
常用的單行文本超出顯示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行顯示...
