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.gjsbs.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的出現,這時候我們就可以使用標簽進行智能的軟換行。還有就是在一些技術文檔中,有的變量名,對象名,屬性名都很長,我們就也可以使用標簽進行智能的軟換行。

如果我們只做的網站是移動端的,屏幕寬度小,使用標簽進行智能的軟換行就更方便啦;蛘呤琼憫降捻撁,也可以用到標簽。

學習疑問申請解答
您的姓名
您的電話
意向課程
 

中公優就業

IT小助手

掃描上方二維碼添加好友,請備注:599,享學習福利。

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

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

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

測一測
你適合學哪門IT技術?

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
聚星注册-聚星登陆