如何區分word-wrap:break-word;和word-break:break-all;????? 剛看到了這兩個屬性,心裡一萬句草泥馬,怎麼還有這麼像的屬性,不僅像還拗口,死記硬背肯定記混.所以就問了度娘把我的理解整理一下. 首先 總說一下這兩個屬性的作用:斷句! 這兩個屬性作用於英文還有數 ...
如何區分word-wrap:break-word;和word-break:break-all;?????
剛看到了這兩個屬性,心裡一萬句草泥馬,怎麼還有這麼像的屬性,不僅像還拗口,死記硬背肯定記混.所以就問了度娘把我的理解整理一下.
首先 總說一下這兩個屬性的作用:斷句!
這兩個屬性作用於英文還有數字 ,瀏覽器把數字和長串的英文包括url地址會當做一個單詞處理,如果該單詞所在的行顯示不下的話,就會整體換行處理.
如果對於特別長單詞不加上面的屬性的樣式,顯示文本的區域就會溢出.
像下麵這樣
下麵我們來看看這個屬性的具體作用.
word-wrap:break-word;
這個屬性的意思就是:
如果一個字元串太長,在第一行的文本後面顯示不下,
則會另起一行,從第二行開始顯示這個長字元串,第二行如果還顯示不下,就會從區域邊界處斷開,把剩餘的字元串顯示到第三行.
不知道這麼說能不能理解,簡單寫了一個的代碼例子,參考著理解.
<style type="text/css"> p{ word-wrap:break-word; width:200px; background:orange; } </style> </head> <body> <p> hello 1111111111111111111111111111111 <p> </body>
代碼的執行效果:
原來不加word-wrap:break-word;的效果:
break-word:break-all;
如果遇到一個節儉的項目經理看見上面hello後面還有那麼大的空間,他肯定不滿意,說你浪費......沒事不怕
現在來看看break-word:break-all;
這個屬性:如果該行的空間不夠,仍然在該行顯示,把超出的部分顯示到下一行.
話不多說上代碼
<style type="text/css"> p{ /*word-wrap:break-word;*/ word-break:break-all; width:200px; background:orange; } </style> </head> <body> <p> hello 1111111111111111111111111111111 <p> </body>
代碼的執行效果:
原來不加word-break:break-all;的效果:
如果那個節儉的項目經理看到你這樣一定會表揚你的!(@-@)
至此,不知道各位大家是否明白了word-wrap:break-word;和word-break;break-all;的區別!
小小總結!如有不正確之處,望大家留言指正!感謝!
尊重原創!轉載請註明出處!
