1.什么是軟切換?軟切換有哪些優(yōu)點(diǎn)和缺點(diǎn)

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

2.什么是軟切換

有人把它翻譯成：軟換行那么我們就來看下wbr這個標(biāo)簽的用法吧靈舟筆趣閣~wbr標(biāo)簽規(guī)定在文本中的何處適合添加換行符。如果單詞太長，或者我們擔(dān)心瀏覽器會在錯誤的位置換行，那么我們可以使用 元素。瀏覽器支持情況：

3.什么是軟切換,有什么優(yōu)勢

所有瀏覽器都支持 標(biāo)簽，除了 Internet Explorerwbr的分析在網(wǎng)頁中，我們?nèi)绻幚鞺RL地址，一般都使用連續(xù)的英文單詞，默認(rèn)情況下是不換行的，比如：代碼如下： p{ 。

4.軟切換技術(shù)有什么樣的優(yōu)點(diǎn)和缺點(diǎn)

width:200px; background: orange; }

http://www.ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/ujiuye.com/zt/we靈舟筆趣閣bqzgcs/

5.軟切換的優(yōu)點(diǎn)與缺點(diǎn)

效果如下：

6.軟切換缺點(diǎn)

看起來很不美觀。如果我們使用word-break:break-all進(jìn)行換行，效果如下：

7.軟切換優(yōu)缺點(diǎn)

單詞雖然換行了，但它把單詞直接打破了，很相應(yīng)閱讀。我們再來改變下p標(biāo)簽的寬度看看效果：

8.軟切換和更軟切換

可讀性真的很差有沒有什么辦法技能換行，又不影響閱讀呢?那就是使用wbr標(biāo)簽進(jìn)行軟換行我們推薦推薦在標(biāo)點(diǎn)之前為 URL 換行，以便避免將標(biāo)點(diǎn)符號留在行尾，這會讓讀者將 URL 的末尾搞錯代碼如下：

9.軟切換和更軟切換區(qū)別

p{ width:200px; background: orange; }

http://www.ujiuye.c靈舟筆趣閣om/zt/webqzgcs

10.軟切換技術(shù)

/ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/

效果如下：

現(xiàn)在我們改變盒子的寬度，代碼如下：p{ width:120px; background: orange; }

http://www.ujiuye

.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/ujiuye.com/zt

/webqzgcs/

效果如下：

我們在所有的標(biāo)簽前面都加上了標(biāo)簽，如果寬度不夠，那么我就在這里換行，如果寬度足夠，那我就不換行，還在一行顯示，這就是標(biāo)簽智能的地方，是不是很神奇~br標(biāo)簽和wbr標(biāo)簽的區(qū)別：靈舟筆趣閣表示必須換行而意思是在瀏覽器窗口或父級窗口寬度足夠的情況下，不換行;在寬度不足的情況下，在加了處主動換行。

如果還是上面的例子，我們使用br標(biāo)簽換行會是什么樣呢?代碼如下：p{ width:200px; background: orange; }

http:

//www

.ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs/效果如下：

我們可以看到，在每個br標(biāo)簽的位置都換行了，右側(cè)留出大量空白位置，不智能，也很不美觀wbr的應(yīng)用場景標(biāo)簽實(shí)際應(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)簽。

如果對Web前端感興趣，不知道怎么入門的話，可以看下這個免費(fèi)的視頻教程：Web前端基本概述及入門講解。