css内容字符 - \ A比br标签占用更多空间

Question

我使用字符\A（或）分行标记br

添加换行符

但我知道，当我使用css内容字符 - \A时，它占用的空间高于br标记。

Jsfiddle在， http://jsfiddle.net/6Lkxr2x6/

不是br代码而\A代表一个换行符吗？

Answer 1

如果您希望\A的行为与<br>代码相同，则需要像这样设置...

#example {
    display:inline;
}
#example:after {
    content:"\a";
    white-space: pre;
}

this StackOver flow question中的更多详情。

Answer 2

  

但是我看到，当我使用css内容字符 - \ A时，它会占用更多   高度比br标签。

它的高度不超过div标签。不同之处在于，在示例中的下一个br中，第一个div引入换行符，然后第二个引入换行符。

它呈现如下：

Two new lines gonna be there [br causes line break here]
[br causes line break here]

然而在第一个#charPrint::after中，伪元素本身从下一行开始，然后显示两个换行符。这是因为您的display: block设置为content。这将导致它从下一行开始创建自己的块。然后它将根据其div属性显示两个换行符。

它呈现如下：

this is a \A print stuff
[pseudo-element starts here] [\A causes line break here]
[\A causes line break here]

这就是为什么你会在第一个::after看到一个额外的中断。

要解决此问题，只需制作inline伪元素block而不是#charPrint::after{ content: '\A\A'; display: inline; white-space: pre; }，这将使其呈现如下：

this is a \A print stuff [pseudo-element starts here] [\A causes line break here]
[\A causes line break here]

小提琴：http://jsfiddle.net/6Lkxr2x6/1/

<强>段：

<div id="charPrint">this is a \A print stuff</div>
<div id="other">Two new lines gonna be there
  <br><br>
</div>
<div> end of content</div>

{{1}}

Answer 3

它的工作原理如下：

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

请查看此jsfiddle：Check Once

Answer 4

#charPrint::after{
  content: '\A\A';
  white-space: pre;
  display: block; /* THIS LINE */
}

您正在添加包含2个换行符的新块。第一个换行符已经在新行上，所以tou得到2个空行。

<br><br>

在这里你没有pecial块，第一个换行符在文本行的末尾，第二个换行符在它自己的位置。只有一个空行。

在第一个示例中，您需要删除display:block：http://jsfiddle.net/6Lkxr2x6/2/