HTML wbr 语法
在 HTML 中，wbr 标签用于在文本中指定建议换行的位置。它会告诉浏览器在该位置可以考虑断开长单词并换行，即使默认情况下该位置不会换行。
wbr 标签的主要作用有以下 2 个：
- 控制长单词或文本的换行：避免文本超出容器宽度，导致布局问题。
- 提高文本的可读性：特别是当文本中包含长单词或连续字符时，使用 wbr 可以使文本更易读。
语法：
<wbr>说明：
wbr 是一个空标签，没有任何属性。它通常直接插入到需要建议换行的文本中，以帮助浏览器在合适的位置进行换行。
提示: wbr 是 “Word Break Opportunity（换行机会）” 的缩写。
HTML wbr 摘要
| 属于 | HTML 换行 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML wbr 示例
接下来，我们通过一个简单的例子来讲解一下 HTML wbr 标签是如何使用的。
示例：wbr 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<p>This is a very longlonglonglonglong<wbr>longlonglong word!</p>
<p>This is a very longlonglonglonglonglonglonglong word!</p>
</body>
</html>页面效果如下图所示。
分析：
上面例子有一个非常长的单词，如果不采取换行建议，它会超出容器宽度。如果使用了 wbr 标签，则会在相应地方进行换行。
在实际开发中，我们也可以考虑使用 CSS 的 overflow-wrap（旧称 “word-wrap”）属性来实现长单词的换行效果。
wbr 与 br 的区别
wbr 和 br 这两个标签看起来很相似，但它们的作用有所不同：
- wbr 标签：它只是一个 “建议”，用于告诉浏览器在指定位置可以考虑换行，浏览器可以根据需要决定是否换行。
- br 标签：它是 “强制” 的，用于指示浏览器在指定位置强制换行，不管该位置是否符合正常的换行规则。
