Question

通过将项目的display设置为flex，我发现最后一个空格已从文本字符串中移除。

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

我已将文字包裹在一个范围内，这没有任何区别。

Answer 1

原因

当您不使用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：

display的flex item值为blockified：if 元素的in-flow子节点的指定display 生成flex container是一个内联级别的值，它会计算到它的块级等价物。

然后，布局就像

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

这可能看起来没有直接关系，但由于the white-space processing model而与之相关：

然后，布置了块容器的内联。 [...]作为每一行   布局，[...]


如果一行末尾的空格（U + 0020）有white-space   设置为normal，nowrap或pre-line，也会被删除。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

解决方案

如果要保留空间，可以将white-space设置为其他值。 white-space: pre-wrap将允许文字换行，white-space: pre赢得

。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

div的结尾缺失。所以，奇怪的事情可能发生。这可能是你想要的：

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

CSS弹性框最后删除空间

2 个答案:

原因

解决方案