实战IT培训机构_IT培训班选大学生IT技术培训中心_中公优就业

400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】軟換行使用詳解

【W(wǎng)eb前端基礎(chǔ)知識】軟換行使用詳解

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

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

wbr是什么?

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

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

瀏覽器支持情況:

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

wbr的分析

在網(wǎng)頁中,我們?nèi)绻幚鞺RL地址,一般都使用連續(xù)的英文單詞,默認情況下是不換行的,比如:

代碼如下:

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

效果如下:

看起來很不美觀。

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

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

我們再來改變下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> 

效果如下:

現(xiàn)在我們改變盒子的寬度,代碼如下:

  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標簽的區(qū)別:

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

如果還是上面的例子,我們使用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標簽的位置都換行了,右側(cè)留出大量空白位置,不智能,也很不美觀。

wbr的應(yīng)用場景

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

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

文章“【W(wǎng)eb前端基礎(chǔ)知識】軟換行使用詳解”已幫助

>>本文地址:http://www.jecan.cn/zhuanye/2020/55735.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

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

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發(fā)智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 双工位钻铣攻牙机-转换工作台钻攻中心-钻铣攻牙机一体机-浙江利硕自动化设备有限公司 | 天津拓展_天津团建_天津趣味运动会_天津活动策划公司-天津华天拓展培训中心 | 污水提升器,污水提升泵,地下室排水,增压泵,雨水泵,智能供排水控制器-上海智流泵业有限公司 | 计算机毕业设计源码网| 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 磨煤机配件-高铬辊套-高铬衬板-立磨辊套-盐山县宏润电力设备有限公司 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 回转窑-水泥|石灰|冶金-巩义市瑞光金属制品有限责任公司 | 广州印刷厂_广州彩印厂-广州艺彩印务有限公司 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 【连江县榕彩涂料有限公司】官方网站 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | T恤衫定做,企业文化衫制作订做,广告T恤POLO衫定制厂家[源头工厂]-【汉诚T恤定制网】 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 卷筒电缆-拖链电缆-特种柔性扁平电缆定制厂家「上海缆胜」 | 船用泵,船用离心泵,船用喷射泵,泰州隆华船舶设备有限公司 | 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 湖北省煤炭供应链综合服务平台| 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 脑钠肽-白介素4|白介素8试剂盒-研域(上海)化学试剂有限公司 | 房车价格_依维柯/大通/东风御风/福特全顺/江铃图片_云梯搬家车厂家-程力专用汽车股份有限公司 | 空心明胶胶囊|植物胶囊|清真胶囊|浙江绿键胶囊有限公司欢迎您! | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 气动隔膜泵-电动隔膜泵-循环热水泵-液下排污/螺杆/管道/化工泵「厂家」浙江绿邦 | 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | uv机-uv灯-uvled光固化机-生产厂家-蓝盾机电 | sus630/303cu不锈钢棒,440C/430F/17-4ph不锈钢研磨棒-江苏德镍金属科技有限公司 | 六自由度平台_六自由度运动平台_三自由度摇摆台—南京全控科技 | 天津仓储物流-天津电商云仓-天津云仓一件代发-博程云仓官网 | 餐饮加盟网_特色餐饮连锁加盟店-餐饮加盟官网 | 亳州网络公司 - 亳州网站制作 - 亳州网站建设 - 亳州易天科技 | 神马影院-实时更新秒播| 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 |