Question

我试图在fontello图标后插入一个 标签来打破这一行，并发现当div用“display：flex”设置样式时它是不可能的。添加空白也被禁用。可以在某个字符后添加新行，但新行在标记下面开始。为什么以及如何解决这个问题？ PS：我注意到Chrome中的情况比Firefox好，但新行仍然在标记下面开始。例如：

.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

在您的第三个示例中，Flex容器的内容被节点拆分为3个flex项，您将得到1个包含以下项的项： White space is also disabled right after，第二项和第三项tag. And why this new line starts beneath tag?。一切看起来都很好，你可以看到3个节点，在文字标签之后有一个换行符，就像你写的一样。

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

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

.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>

Flexbox在``标签后禁用html break标签？

1 个答案: