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

我們?cè)谥谱黜撁娴臅r(shí)候經(jīng)常使用br標(biāo)簽進(jìn)行換行，那么什么事軟換行呢?HTML5中出現(xiàn)了一個(gè)新的元素是wbrwbr是什么?wbr是Word Break Opportunity 的縮寫，Word Break Opportunity的意思是：?jiǎn)卧~換行時(shí)機(jī)。

2.什么是軟切換

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

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

所有瀏覽器都支持 標(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)閱讀。我們?cè)賮砀淖兿聀標(biāo)簽的寬度看看效果：

8.軟切換和更軟切換

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

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/

效果如下：

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

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

http:

//www

.ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs

/ujiuye

.com

/zt

/webqzgcs/效果如下：

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

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

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