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

Question

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

添加换行符

但我发现，当我使用 css 内容字符 - \A 时，它占用的高度比 br 标签高。

br 标记和 \A 不代表单个换行符吗？

Answer 1

如果您希望 \A 表现得像 <br> 标签，您需要这样设置...

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

this StackOver flow question 中有更多详细信息。

Answer 2

它是这样工作的：

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

只需检查一下这个 jsfiddle：Check Once

Answer 3

But I see, when I use the css content character - \A, it takes up more height than a br tag.

它没有比 br 标签高。不同之处在于，在示例中的下一个 div 中，第一个 br 引入了一个换行符，然后第二个 br 引入了另一个换行符。

它呈现如下：

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

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

显示两个换行符

它呈现如下：

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

这就是您在第一个 div 中看到额外中断的原因。

要解决这个问题，只需将 ::after 伪元素设为 inline 而不是 block，这将使其呈现如下：

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

片段：

#charPrint::after{ content: '\A\A'; display: inline; white-space: pre; }

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

Answer 4

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

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

<br><br>

这里没有特殊的块，第一个换行符在文本行的末尾，第二个换行符单独存在。只有一个空行。

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

css content character - \A takes more space than br tag