400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】软换行使用详解

【Web前端基础知识】软换行使用详解

我们在制作页面的时候经常使用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://klcpwkhdxz.989jbs.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学习资料

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

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

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
网站地图 五星彩票网址 cc彩票游戏 澳门太阳城集团官网
菲律宾申博代理开户合作 太阳城亚洲登入 手机线上娱乐平台 申博太阳城开户
金盈娱乐 新濠天地注册送79元登入 金沙娱乐平台 彩22新疆时时彩
快乐彩票网址 cc彩票网投 500w彩票网客户端下载 58彩票网是合法的吗
五星彩票app下载 500w彩票电脑版 彩29彩票网址 彩29彩票网官网
518jbs.com 8LJS.COM 5TGP.COM 206SUN.COM 978jbs.com
XSB889.COM 22TGP.COM S618X.COM XSB567.COM ib57.com
198jbs.com 575sj.com 381psb.com 151ib.com 555xsb.com
333BBIN.COM 5TGP.COM 593ib.com XSB878.COM 8WJS.COM