html – 删除CSS弹性框最后一个空格

<div class="has_flex"> Some text <a href="link">Link</a></div>

<div class="has_flex"> Some text<a href="link">Link</a></div>

.has_flex {
  display: flex;
}

<div class="no__flex">Some text <a href="link">Link</a></div>
<div class="has_flex">Some text <a href="link">Link</a></div>

原因

当你不使用display：flex时,你的布局变得像

<div class="has_flex"><!--
  --><anonymous style="display: inline">Some text </anonymous><!--
  --><a         style="display: inline">Link</a><!--
--></div>

文本(包括末尾的空格)包含在anonymous inline box中：

但是,Flexbox布局会阻止flex items：

然后,布局就像

<div class="has_flex"><!--
  --><anonymous style="display: block">Some text </anonymous><!--
  --><a         style="display: block">Link</a><!--
--></div>

这看起来似乎没有直接关系,但是因为the white-space processing model它是相关的：

因此,当匿名元素和链接都是内联时,空间位于一行的中间.如果你有多个空格,它们会崩溃成一个空格,但不会完全消失.

但是,当您使用flexbox时,每个flex项都有自己的行,因此空间位于一行的末尾.所以它被删除了.

请注意,此问题并非特定于flexbox,也会删除内联块末尾的空格.

.in-blo {
  display: inline-block;
}

<div><span class="inline">Some text </span><a href="link">Link</a></div>
<div><span class="in-blo">Some text </span><a href="link">Link</a></div>

但是,在这种情况下,您可以将空间移动到内联块之外.在flexbox中,这是不可能的,因为不会呈现仅包含空格的匿名弹性项目.

解

如果要保留空间,可以将空格设置为其他值. white-space：预包装将允许文本换行,白色空间：pre不会.

.has_flex {
  display: flex;
  white-space: pre-wrap;
}

<div class="no__flex">Some text <a href="link">Link</a></div>
<div class="has_flex">Some text <a href="link">Link</a></div>