为什么浏览器不渲染 <br> 中的尾随 <div>？

Question

我有一个包含动态内容的 div，其中行由

<br>

元素分隔。问题是所有主流浏览器都会忽略最后一个

<br>

元素。

<div>
    long content ...
</div>
<div>
    long content ...
    <br>
</div>
<div>
    long content ...
    <br>
    <br>
</div>

参见 https://jsfiddle.net/4ppqb1ug/。示例有 3 个 div。

• 首先末尾没有

  <br>

  。
• 第二个末尾有 1

  <br>

  ，但如果滚动底部的 div，末尾不会有空行。
• 第三个末尾有 2 个

  <br>

  ，但只渲染了一个。
• 演示中没有出现的第四个有 3 个

  <br>

  ，仅渲染了 2 个。
• 演示中未出现的第五个有 4 个

  <br>

  ，仅渲染了 3 个。

为什么浏览器忽略最后一个？我可以阻止这种情况吗？有没有比重复最后一个

<br>

更好的解决方案？

Answer 1

浏览器运行正常；您只是错误地将

br

元素视为间隔符。

如HTML 5 规范中所述，它们是换行符。这些元素中的每一个都会将回车符返回到下一行，但不会在该行上打印任何内容。只有在添加第二行之前，第一行的空间才会被表示。

你的第二个问题的答案是，是的，这个问题有一个更好的解决方案：使用CSS来设置那些

margin

元素的

padding

或

div

。这使得结构 (HTML) 与演示文稿 (CSS) 分离。

Answer 2

我从来没有用过

<br>

来做这个。您可以使用 p 标签轻松管理它。还有文本格式化 CSS 规则，如

line-height

、

font-size

、...。您可以轻松使用它们并创建美观的文本。每当您需要为新段落换行时，标准方法是使用另一个 p 标签，而不是

<br>

。

Answer 3

br

标签仅使用换行符，无法防止，它解决了您可以使用

padding and margin

最后一个div跨度和其他

Answer 4

这是因为

<br>

不渲染任何空白。如果你想要一个空行，你需要有两个

<br>

标签

Answer 5

我很惊讶地发现这里没有核心问题的真正答案（除了“使用CSS”..真的吗？？）：

还有比重复最后一个

<br>

更好的解决方案吗？

这个问题在该问题的搜索结果中出现得相当高，所以我想提供以下解决方案：

.container:after {
  content: '\2060'
}

我们选择附加一个包含 word joiner 字符的伪元素。它实际上与添加另一个

<br>

相同，但它是一个纯 CSS 解决方案，对用户来说是不可见的。该字符可以是任何零宽度的字符，只要它使浏览器尊重我们内容中的最后一个

<br>

。