我們先看看不加任何屬性是如何換行處理的
下面各類屬性都是加在一個p元素上的鱼喉。
p {
width: 300px;
padding: 5px;
background-color: #f0f3f9;
font-size: 14px;
}
我們看到不加任何屬性時候锋边,邊界遇到中文自動換行。英文需要有空格才會換行编曼。如果一個單詞長到一行都無法顯示完全的話豆巨,這個單詞則不會進行換行,而是溢出顯示掐场。
word-break
word-break: normal; //使用默認的換行規(guī)則往扔。
word-break: break-all; //允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
word-break: keep-all;//不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行熊户,只能在半角空格或連字
符處換行萍膛。非CJK文本的行為實際上和normal一致。
word-break:break-all
我們看到word-break:break-all就是非常暴力的遇見什么折斷什么的方式進行換行嚷堡。
word-break: keep-all
我們可以看到中文在沒有遇到半角空格或連字符時蝗罗,是不進行換行的。而非CJK文本的行為表現(xiàn)和normal一致。
word-wrap
word-wrap: normal;
word-wrap: break-word;//一行單詞中實在沒有其他靠譜的換行點的時候換行串塑。
僅用于塊對象沼琉,內聯(lián)對象要用的話,必須要設定height拟赊、width或display:block或position:absolute刺桃。
word-wrap: break-word
word-wrap:break-word則帶有憐憫之心,如果這一行文字有可以換行的點吸祟,如空格瑟慈,或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的,則就不打英文單詞或字符的主意了屋匕,讓這些換行點換行葛碧。如果沒有其他可以換行的符號空格等再折斷單詞進行換行。
記憶方法word-wrap: break-word 和 word-break:break-all
有兩個break的就是很強硬的斬斷一切的过吻。只有一個break的相對比較溫和进泼。先看空格之類的換行符。
white-space
white-space是字符是否換行顯示的
常用的單行文本超出顯示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行顯示...