删除了CSS弹性框最后一个空格 [英] CSS flex box last space removed

问题描述

通过将项目的显示设置为 flex 我发现最后一个空格从文本字符串中被删除所以。

 < div class =has_flex>一些文字< a href =link>连结< / a>< / div> 
  

成为

 < div class =has_flex>一些文字< a href =link>连结< / a>< / div> 
  

。 has_flex {display：flex;}

< div class = no__flex>某些文字< a href =link>连结< / a>< / div>< div class =has_flex>一些文字< a href =link> Link< ; / a>< / div>

文本在一个范围内，并没有什么区别。

解决方案

原因

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

 < div class =has_flex><！ -  
  - >< anonymous style =display：inline>一些文字< / anonymous><！ -  -  
  - >< a style =display：inline> Link< / a>< ！ -  
  - >< / div> 
  

文本（包括最后的空格）包含在匿名内联框：

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

然而，Flexbox布局会阻止 flex items ：

display flex item 封锁：如果
是指定的的CSS21 / visuren.html＃propdef-displayrel =noreferrer> display 生成<一个href =https://www.w3.org/TR/css-flexbox-1/#flex-container =noreferrer> flex容器是一个内联级别的值，它计算
到与它相同的块级别。

然后，布局将会像

 < div class =has_flex><！ - 
  - >< anonymous style =display：block>一些文字< / anonymous><！ -  
  - >< a style =display：block >连结< / a><！ -  
  - >< / div> 
  

这似乎没有直接关系，但是因为 white-space 处理模型：

然后，块容器的内联被布置。 [...]由于每行
已经布置，[...]

3. 空行（U + 0020）在行尾有空格
   设置为正常， nowrap 或 pre-line ，它也会被删除。

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

但是，当您使用flexbox时，每个flex项目都有自己的行，空间因此处于一条线的末端。所以它被删除。

请注意，这个问题不是特定于flexbox，内联块结尾处的空格也会被删除。

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

在这种情况下，您可以将内嵌块之外的空间移出。在Flexbox中，这是不可能的，因为只包含空格的匿名Flex项目不会呈现。

解决方案

如果您想保留空间，您可以将 white-space 设置为另一个值。 white-space：pre-wrap 将允许文字环绕， white-space：pre 不会。

.has_flex {display：flex; <-c $ c>< div-space：pre-wrap;}

 class =no__flex>一些文字< a href =link>连结< / a>< / div>< div class =has_flex>一些文字< a href =link> ; Link< / a>< / div>  

By setting the display of an item to flex I am finding the last space is removed from a text string so.

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

I have wrapped the text in a span and that makes no difference.

解决方案

Reason

When you don't use display: flex, the your layout becomes something like

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

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Then, the layout will be like

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

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line is laid out, [...]

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.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

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

However, in that case you can just move the space outside the inline-block. In flexbox that's not possible, because anonymous flex items that contain only white space are not rendered.

Solution

If you want to preserve the space, you can set white-space to another value. white-space: pre-wrap will allow text wrapping, 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>

这篇关于删除了CSS弹性框最后一个空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！