【W(wǎng)eb前端基礎(chǔ)知識】軟換行使用詳解

我們在制作頁面的時候經(jīng)常使用br標(biāo)簽進(jìn)行換行，那么什么事軟換行呢?HTML5中出現(xiàn)了一個新的元素是wbr。

wbr是什么?

wbr是Word Break Opportunity 的縮寫，Word Break Opportunity的意思是：單詞換行時機(jī)。有人把它翻譯成：軟換行。那么我們就來看下wbr這個標(biāo)簽的用法吧~

wbr標(biāo)簽規(guī)定在文本中的何處適合添加換行符。如果單詞太長，或者我們擔(dān)心瀏覽器會在錯誤的位置換行，那么我們可以使用 元素。

瀏覽器支持情況：

所有瀏覽器都支持 標(biāo)簽，除了 Internet Explorer。

wbr的分析

在網(wǎng)頁中，我們?nèi)绻�要處理URL地址，一般都使用連續(xù)的英文單詞，默認(rèn)情況下是不換行的，比如：

代碼如下：

1. <style> 
2.     p{ 
3.         width:200px; 
4.         background: orange; 
5.     } 
6. </style> 
7. <p>http://hqfphsz.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/</p> 

效果如下：

看起來很不美觀。

如果我們使用word-break:break-all進(jìn)行換行，效果如下：

單詞雖然換行了，但它把單詞直接打破了，很相應(yīng)閱讀。

我們再來改變下p標(biāo)簽的寬度看看效果：

可讀性真的很差。

有沒有什么辦法技能換行，又不影響閱讀呢?那就是使用wbr標(biāo)簽進(jìn)行軟換行。

我們推薦推薦在標(biāo)點之前為 URL 換行，以便避免將標(biāo)點符號留在行尾，這會讓讀者將 URL 的末尾搞錯。

代碼如下：

1. <style> 
2. p{ 
3. width:200px; 
4. background: orange; 
5. } 
6. </style> 
7. <p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p> 

效果如下：

現(xiàn)在我們改變盒子的寬度，代碼如下：

1. <style> 
2. p{ 
3. width:120px; 
4. background: orange; 
5. } 
6. </style> 
7. <p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p> 

效果如下：

我們在所有的標(biāo)簽前面都加上了標(biāo)簽，如果寬度不夠，那么我就在這里換行，如果寬度足夠，那我就不換行，還在一行顯示，這就是標(biāo)簽智能的地方，是不是很神奇~

br標(biāo)簽和wbr標(biāo)簽的區(qū)別：

表示必須換行。而意思是在瀏覽器窗口或父級窗口寬度足夠的情況下，不換行;在寬度不足的情況下，在加了處主動換行。

如果還是上面的例子，我們使用br標(biāo)簽換行會是什么樣呢?

代碼如下：

1. <style> 
2. p{ 
3. width:200px; 
4. background: orange; 
5. } 
6. </style> 
7. <p>http:<br>//www<wbr>.ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs/</p> 

效果如下：

我們可以看到，在每個br標(biāo)簽的位置都換行了，右側(cè)留出大量空白位置，不智能，也很不美觀。

wbr的應(yīng)用場景

標(biāo)簽實際應(yīng)用場景比較多的，比如我們例子中提到的URL的處理，網(wǎng)站中難免有URL的出現(xiàn)，這時候我們就可以使用標(biāo)簽進(jìn)行智能的軟換行。還有就是在一些技術(shù)文檔中，有的變量名，對象名，屬性名都很長，我們就也可以使用標(biāo)簽進(jìn)行智能的軟換行。

如果我們只做的網(wǎng)站是移動端的，屏幕寬度小，使用標(biāo)簽進(jìn)行智能的軟換行就更方便啦�；蛘呤琼憫�(yīng)式的頁面，也可以用到標(biāo)簽。