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

2024-01-07

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

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

Becomes

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

我将文本包裹在一个跨度中，这没有什么区别。

Reason

当你不使用时display: flex，你的布局变得像

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

文本（包括末尾的空格）被包裹在匿名内嵌框 https://www.w3.org/TR/CSS21/visuren.html#anonymous:

任何直接包含在块容器元素内（而不是内联元素内）的文本都必须被视为匿名内联元素。

然而，Flexbox 布局阻碍了弹性项目 https://www.w3.org/TR/css-flexbox-1/#flex-items:

The display https://www.w3.org/TR/CSS21/visuren.html#propdef-display的值弹性项目 https://www.w3.org/TR/css-flexbox-1/#flex-item is 块化的 https://www.w3.org/TR/css-display-3/#blockify：如果指定的display https://www.w3.org/TR/CSS21/visuren.html#propdef-display元素的流入子元素的生成一个柔性容器 https://www.w3.org/TR/css-flexbox-1/#flex-container是一个内联级值，它计算到其块级等效项。

然后，布局将是这样的

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

这可能看起来没有直接关系，但它是相关的，因为the white-space加工模型 https://www.w3.org/TR/CSS21/text.html#white-space-model:

然后，对块容器的内联进行布局。 [...] 每行已布置，[...]

如果行尾有空格 (U+0020)white-space设置normal, nowrap, or pre-line, 它也被删除.

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

但是，当您使用 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 中这是不可能的，因为仅包含空白的匿名 Flex 项目不会被渲染。

Solution

如果你想保留空间，可以设置white-space到另一个值。white-space: pre-wrap将允许文本换行，white-space: pre won't.

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox