• <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    400-650-7353

    精品課程

    您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】軟換行使用詳解

    【Web前端基礎知識】軟換行使用詳解

    • 發布: Web前端培訓
    • 來源:Web前端干貨資料
    • 2020-09-18 14:21:17
    • 閱讀()
    • 分享
    • 手機端入口

    我們在制作頁面的時候經常使用br標簽進行換行,那么什么事軟換行呢?HTML5中出現了一個新的元素是wbr

    wbr是什么?

    wbr是Word Break Opportunity 的縮寫,Word Break Opportunity的意思是:單詞換行時機。有人把它翻譯成:軟換行。那么我們就來看下wbr這個標簽的用法吧~

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

    瀏覽器支持情況:

    所有瀏覽器都支持 標簽,除了 Internet Explorer。

    wbr的分析

    在網頁中,我們如果要處理URL地址,一般都使用連續的英文單詞,默認情況下是不換行的,比如:

    代碼如下:

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

    效果如下:

    看起來很不美觀。

    如果我們使用word-break:break-all進行換行,效果如下:

    單詞雖然換行了,但它把單詞直接打破了,很相應閱讀。

    我們再來改變下p標簽的寬度看看效果:

    可讀性真的很差。

    有沒有什么辦法技能換行,又不影響閱讀呢?那就是使用wbr標簽進行軟換行。

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

    代碼如下:

    1. <style> 
    2. p{ 
    3. width:200px; 
    4. background: orange; 
    5. </style> 
    6. <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> 

    效果如下:

    現在我們改變盒子的寬度,代碼如下:

    1. <style> 
    2. p{ 
    3. width:120px; 
    4. background: orange; 
    5. </style> 
    6. <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> 

    效果如下:

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

    br標簽和wbr標簽的區別:

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

    如果還是上面的例子,我們使用br標簽換行會是什么樣呢?

    代碼如下:

    1. <style> 
    2. p{ 
    3. width:200px; 
    4. background: orange; 
    5. </style> 
    6. <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標簽的位置都換行了,右側留出大量空白位置,不智能,也很不美觀。

    wbr的應用場景

    標簽實際應用場景比較多的,比如我們例子中提到的URL的處理,網站中難免有URL的出現,這時候我們就可以使用標簽進行智能的軟換行。還有就是在一些技術文檔中,有的變量名,對象名,屬性名都很長,我們就也可以使用標簽進行智能的軟換行。

    如果我們只做的網站是移動端的,屏幕寬度小,使用標簽進行智能的軟換行就更方便啦。或者是響應式的頁面,也可以用到標簽。

    課程好禮申請領取
    您的姓名
    您的電話
    意向課程
     

    中公優就業

    官方QQ

    掃描上方二維碼或點擊一鍵加群,免費領取價值599元網課,加群暗號:599。 一鍵加群

    >>本文地址:
    注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

    推薦閱讀

    優就業:ujiuye

    關注中公優就業官方微信

    • 關注微信回復關鍵詞“大禮包”,領80G學習資料
    QQ交流群
    領取免費網課
    (加群備注“網站”)
    IT培訓交流群 加入群聊 +
    軟件測試 加入群聊 +
    全鏈路UI/UE設計 加入群聊 +
    Python+人工智能 加入群聊 +
    互聯網營銷 加入群聊 +
    Java開發 加入群聊 +
    PHP開發 加入群聊 +
    VR/AR游戲開發 加入群聊 +
    大前端 加入群聊 +
    大數據 加入群聊 +
    Linux云計算 加入群聊 +
    優就業官方微信
    掃碼回復關鍵詞“大禮包”
    領取80G學習資料

    巨劃算
    現在開通
    2020OAO訓練營
    免費試聽
    課程資料、活動優惠 領取通道
     
     
  • <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    线上棋牌平台