首頁 > 開發者 > JavaScript
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;的區別!小小總結!如有不正確之處,望大家留言指正!感謝!
尊重原創!轉載請註明出處!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
