当我标记附近的文本时， HTML忽略换行符

Question

我想用两行显示文本。添加<br>标签可以实现:

<!-- Browser displays two lines of text, as intended -->
<a>Text unit 1<br>
Text unit 2 </a>

我想给"文本单元2"应用样式。无论我对文本应用什么标签，只要我引入<br>，浏览器就会忽略它:

<!-- Browser displays one line of text, not as intended -->
<a>Text unit 1<br>
<literally any HTML tag>Text unit 2</tag></a>

我试过<span>,<p>,<div>,<em>和<strong>标签。一旦引入标签，它们都显示为单行而不是两行。

我如何强制<br>标签实现换行?

编辑:Firefox 85和Chromium 87.0

Answer 1

如果<a>本身是display: flex，那么<br>元素本身将成为一个flex元素，并将根据flex规则进行布局。你最终会得到一个flex布局，看起来像这样:| text 1 | <br /> | text 2 |，所有的东西都排在一行:

a {
display: flex;
}

<a>Text unit 1<br><div>Text unit 2</div></a>

您可以通过将每个子元素设置为一个元素并将flex-direction设置为column:

来解决这个问题。

a {
display: flex;
flex-direction: column;
}

<a>
<div>Text unit 1</div>
<div>Text unit 2</div>
</a>

但如果这就是你所做的，你根本不需要flex:

<a>
<div>Text unit 1</div>
<div>Text unit 2</div>
</a>