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

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

2.什么是軟切換

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

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

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

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

width:200px; background: orange; }

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

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

效果如下：

6.軟切換缺點

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

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

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

8.軟切換和更軟切換

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

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

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

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

10.軟切換技術

/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/

效果如下：

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

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

http:

//www

.ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs/效果如下：

我們可以看到，在每個br標簽的位置都換行了，右側留出大量空白位置，不智能，也很不美觀wbr的應用場景標簽實際應用場景比較多的，比如我們例子中提到的URL的處理，網(wǎng)站中難免有URL的出現(xiàn)，靈舟筆趣閣這時候我們就可以使用標簽進行智能的軟換行。

還有就是在一些技術文檔中，有的變量名，對象名，屬性名都很長，我們就也可以使用標簽進行智能的軟換行如果我們只做的網(wǎng)站是移動端的，屏幕寬度小，使用標簽進行智能的軟換行就更方便啦或者是響應式的頁面，也可以用到標簽。

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