vlambda博客
学习文章列表

<wbr> | HTML5 寻机换行标签的定义与用法

定义与用法

  • <wbr>标签(Word Break Opportunity)用于指定HTML文档中添加换行符的机会。

  • 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 标签。

  • <wbr> 标签是 HTML5 中的新标签。


<wbr>和<br>标签之间的区别


<br>标签强制换行,而<wbr>标签仅表示可能换行。仅在必要时候方便浏览器换行(例如,在page的末尾)。



语法格式

<wbr>


示例代码

<h5>我们在一个组合的长单词WordBreakOpportunity中插入wbr标签,当窗口缩小时我们可以看到,它可以在插入wbr标签的地方换行。</h5>  
<strong>不使用<code>wbr</code>标签...</strong>
<p><i>This example from www.runoon.com,Learning html we need to know the WordBreakOpportunity tag.</i></p>
<strong>使用<code>wbr</code>标签...</strong>
<p><i>This example from www.runoon.com,Learning html we need to know the <wbr>Word<wbr>Break<wbr>Opportunity tag<wbr>.</i></p>

效果展示:


我们在一个组合的长单词WordBreakOpportunity中插入wbr标签,当窗口缩小时我们可以看到,它可以在插入wbr标签的地方换行。


不使用wbr标签…

This example from www.runoon.com,Learning html we need to know the WordBreakOpportunity tag.


使用wbr标签…

This example from www.runoon.com,Learning html we need to know the WordBreakOpportunity tag.



浏览器支持

IE Firefox Chrome Safari Opera
<wbr> | HTML5 寻机换行标签的定义与用法 <wbr> | HTML5 寻机换行标签的定义与用法 <wbr> | HTML5 寻机换行标签的定义与用法

所有主流浏览器都支持 <wbr> 标签,除了 Internet Explorer。



全局属性


<wbr> 标签支持 HTML 的全局属性。



事件属性


<wbr> 标签支持 HTML 的事件属性。


点击下方“阅读原文”阅览效果更佳