• 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.52sxzy.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 您更想做哪个方向的工作?

    获取测试结果
     
    课程资料、活动优惠 领取通道
     
     
    韩国毛茸茸的丰满妇女,亚洲国内自拍愉拍,高清性色生活片97,亚洲日本成本人观看 网站地图