为什么带有内容的:: before伪元素在'display:flex'容器中仅去除前导空格? [英] Why does a ::before pseudoelement with content have only leading spaces stripped in a 'display: flex' container?

问题描述

请参见 jsfiddle

请注意，除了伪元素(:: before.content)仅对其前导空间进行了修剪之外，前导和尾随空间均从每个元素中去除得相当一致.为什么是这样?我希望尾随空格也将被删除

Note that both leading and trailing spaces are stripped from each element fairly consistently, except for the pseudo element (::before.content), which only has its leading space trimmed. Why is this? I would expect the trailing space to be removed as well

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}

<div class="flexy">
  A girl
  <span class="noname">no name</span>
</div>
<br/>
<div class="flexy">
  A girl
  <span class="noname"><span>no name</span></span>
</div>
<br/>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

推荐答案

为更好地理解这一点，让我们首先添加缺少的案例.

To better understand this, let's first add the missing cases.

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}

.noname-after::after {
  content: ' has ';
}
span {
  border:1px solid;
}

<div class="flexy">
  A girl <span class="noname">no name</span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname"><span>no name</span></span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"><span>no name</span></span> some text after
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"></span><span>no name</span> some text after
</div>
<br>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

我们可以清楚地看到，在哪里使用before时，我们缺少前导空格；而在使用after的情况下，则缺少尾随空格；如果跨度之内只有after(或before)，则两者都缺少.

We can clearly see that we are missing the leading space when where are using before and the trailing one when using after and both of them if only after (or before) is inside the span.

换句话说，我们丢失了所有<span>元素(使用或不使用伪元素)边缘的空格，这是合乎逻辑的，因为这是white-space的默认行为. 根据规范:

In other words, we are missing the spaces at the edges of all the <span> elements (with or without the use of pseudo element) and this is logical because it's the default behavior of white-space. From the specification:

每行都布置好

1. 如果在行首的空格(U + 0020) 已将空白"设置为正常"，"nowrap"或行前"，则它已被删除.
2. 所有制表符(U + 0009)均以水平移位的形式呈现，该直线将下一个字形的起始边缘与下一个制表符停止点对齐.制表符停止点发生在从块的起始内容边缘开始以块字体显示的空格宽度(U + 0020)的8倍的倍数处.
3. 如果行尾的空格(U + 0020) 已将空白"设置为正常"，"nowrap"或行前"，则它也会被删除.
4. 如果一行末尾的空格(U + 0020)或制表符(U + 0009)的空白"设置为预包装"，则UA可能会在视觉上折叠它们.

1. If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.
2. All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
3. If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
4. If spaces (U+0020) or tabs (U+0009) at the end of a line have 'white-space' set to 'pre-wrap', UAs may visually collapse them.

现在您将告诉我，我们正在处理span元素，虽然没有代码块和换行符，但是我们位于flex容器中，因此每个元素都会被阻塞，并且以上规则在此处适用.

Now you will tell me that we are dealing with span elements and we don't have block and new lines but we are inside a flex container thus each element will get blockified and the above rules applies here.

弹性项目的显示值被阻止 ^参考

需要注意的是，伪元素不是flex容器的直接子元素，因此它们仍然是block元素中的内联元素.如果我们将其更改为block元素(使用inline-block ¹ 表示例如)，您将看到空格将始终消失:

Worth to note that the pseudo element aren't direct child of the flex container so they are still inline element inside block element .If we change them to block element (using inline-block¹ for example) you will see that the spaces will always disappear:

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
  display:inline-block;
}

.noname-after::after {
  content: ' has ';
  display:inline-block;
}
span {
  border:1px solid;
}

<div class="flexy">
  A girl <span class="noname">no name</span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname"><span style="display:inline-block;">no name</span></span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"><span>no name</span></span> some text after
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"></span><span>no name</span> some text after
</div>
<br>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

另一个需要注意的重要事项是flexbox如何处理空格:

Another important thing to note is how flexbox handle spaces:

flex容器的每个流入子元素都将成为一个弹性项目，，并且每个连续的子文本序列都包装在一个匿名块容器flex项目中.但是，如果整个子文本序列仅包含空格(即可能受white-space属性影响的字符)，则不会呈现(就像如果其文本节点未显示:

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).

现在，我们可以清楚地了解正在发生的事情.在我们的flex容器内部，我们首先通过删除flex项目之间的所有多余空间来创建flex项目.然后，每个flex项目都成为一个块级元素，并且在内部应用了空格算法，该算法删除了该块内的尾部和前导空格.

Now we can clearly understand what is happening. Inside our flex container we first create the flex items by removing all the extra spaces between them. Then each flex item become a block level element and inside we apply the white space algorithm that removes the trailing and leading spaces inside that block.

如果要保留尾部和前导空格，可以更改white-space属性:

You can change the white-space property if you want to keep the trailing and leading spaces:

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}

.noname-after::after {
  content: ' has ';
}
span {
  border:1px solid;
  white-space:pre;
}

<div class="flexy">
  A girl <span class="noname">no name</span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname"><span>no name</span></span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"><span>no name</span></span> some text after
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"></span><span>no name</span> some text after
</div>
<br>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

这里是另一个示例，可以更好地逐步了解正在发生的事情:

Here is another example to better understand what is happening step by step:

span {
  border:1px solid;
}
div {
  border:1px solid red;
  margin:10px 0;
}

Spaces are removed from the start and the end, spaces inside are kept (contiguous spaces are collapsed to only one space)
<div>
<span> text inside span </span>   text without span<span> text inside span </span>
</div>
I made the last span inline-block so its first space inside is removed
<div>
<span> text inside span </span>   text without span<span style="display:inline-block"> text inside span </span>
</div>
Spaces between flex items are removed (We have 3 items and one inside an anonymous block) then first and last space inside each flex items are also removed
<div style="display:flex;">
<span> text inside span </span>   text without span<span> text inside span </span>
</div>
We change the white space algorithm and now all the spaces are kept
<div style="display:flex;white-space:pre;">
<span> text inside span </span>   text without span<span> text inside span </span>
</div>

^{1:此值使元素生成内联级块容器.内联块的内部被格式化为块框，并且元素本身被格式化为原子内联级别框.}

^{1: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.}

这篇关于为什么带有内容的:: before伪元素在'display:flex'容器中仅去除前导空格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！