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

概述通过将项目的显示设置为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 通过将项目的显示设置为flex我发现最后一个空格是从文本字符串中删除的.

<div > Some text <a href="link">link</a></div>

变

<div > Some text<a href="link">link</a></div>

.has_flex {  display: flex;}

<div >Some text <a href="link">link</a></div><div >Some text <a href="link">link</a></div>

我已经将文本包裹在一个范围内,这没有任何区别.

解决方法 原因

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

<div ><!--  --><anonymous >Some text </anonymous><!--  --><a         >link</a><!----></div>

文本(包括末尾的空格)包含在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.

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

The 07002 value of a 07003 is 07004: if
the specifIEd 07002 of an in-flow child of an element
generating a 07006 is an inline-level value,it computes
to its block-level equivalent.

然后,布局就像

<div ><!--  --><anonymous >Some text </anonymous><!--  --><a         >link</a><!----></div>

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

Then,the block container’s inlines are laID out. […] As each line
is laID out,[…]

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.

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

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

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

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

<div><span >Some text </span><a href="link">link</a></div><div><span >Some text </span><a href="link">link</a></div>

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

解

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

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

<div >Some text <a href="link">link</a></div><div >Some text <a href="link">link</a></div>

总结

以上是内存溢出为你收集整理的html – 删除CSSd性框最后一个空格全部内容，希望文章能够帮你解决html – 删除CSSd性框最后一个空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。