什么是 <wbr> HTML 标签以及为什么我需要它？

所以，HTML 中这个标签的简单解释是“工作中断”。这并不意味着它每次都会中断，而是每次需要中断时都会中断。

您可能会想，但是 CSS 也可以做到这一点，word-break: break-all是的，这可以工作，但我们没有任何控制权。

为了快速向您展示差异：

你一眼就能看出，这个<wbr>版本的可读性更强了，因为我们控制了出错的地方！CSS解决方案每次都会出错。

当然，您无法去编辑网站上的每个内容，但我发现这种方法对于标题非常有用！

HTML 标签的工作原理

使用这个标签非常简单，我们只需将它放在可能有断点的长词中即可！

super<wbr />long<wbr />word<wbr />that<wbr />needs<wbr />to<wbr />break<wbr />better

您可以看到这只是一个虚假的词，但如果我们在演示中运行它，您会看到它只会在这些点上中断（如果需要）！

它是一个空元素，意味着它没有结束标记并且不需要自行关闭。

在上面的例子中，您可以看到一个单词中可以有多个断句。

注意：如果比实际最小的中断更小，它将不会显示！

演示

<wbr>我在 Codepen 上创建了这个演示来演示HTML 标签和方法之间的区别CSS word-break。

您可以水平调整这些框的大小来查看断点。

浏览器支持

全力支持！！因为 IE 已经死了💁‍♂️！
我非常喜欢用这个超酷的HTML属性来修复响应式设计的小问题。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。