Flexbox 在 `</i>` 标记之后禁用 html 中断标记？

Question

我尝试在 fontello 图标后插入<br /> 标记来换行，发现当 div 的样式为“display:flex”时这是不可能的。添加空白也被禁用。可以在某个字符后添加新行，但新行从 <i> 标记下方开始。为什么以及如何解决这个问题？ PS：我注意到在 Chrome 中的情况比在 Firefox 中要好，但新行仍然在<i> 标签下开始。 示例：

.with_flexbox{
display:flex;
color:purple;
}

<div class="with_flexbox red">
With flexbox I can't use &lt;br /&gt; tag right after <i>&lt;i&gt;</i><br /> tag
</div>
<div class="without_flexbox">
Without flexbox break after <i>&lt;i&gt;</i><br />
tag works fine.
</div>
<div class="with_flexbox">
White space is also disabled right after <i>&lt;i&gt;</i>    tag. <br />And why this new line starts beneath &lt;i&gt; tag?
</div>

Answer 1

在您的弹性容器的第三个示例中，您的弹性容器的内容被<i> 节点拆分为 3 个弹性项目，您将获得 1 个项目，其中包括： White space is also disabled right after，第二项<i><i></i> 和第三项tag. <br> And why this new line starts beneath <i> tag?。一切看起来都很好，你会得到 3 个水平显示的节点，单词标签后有一个换行符，就像你写的一样。

将文本片段包装到单独的标签中不仅在语义上有意义，而且有助于您维护代码。

如果你想坚持使用flexbox，你应该单独命名每个节点并使用flex-direction: column而不是br标签，或者你可以为两个元素设置flex基础并使用flex-wrap。下面附上示例 sn-p。

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  outline: 1px solid red;
}

.item__icon {
    outline: 1px solid blue;
}

.item__intro {
  outline: 1px solid green;
}

.item__description{
  outline: 1px solid yellow;
}

<figure class="item">
 <p class="item__intro">White space is also disabled right after</p>   
 <i class="item__icon">&lt;i&gt;</i>
 <figcaption class="item__description">tag. <br />And why this new line starts beneath &lt;i&gt; tag?</figcaption>
</div>