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.ujiuye.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训练营
免费试听
课程资料、活动优惠 领取通道