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

Question

我使用字符 \A(或)换行符 br

添加换行符

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

Jsfiddle 位于， http://jsfiddle.net/6Lkxr2x6/

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

Answer 1

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

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

它呈现如下:

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

Whereas in the first div the pseudo-element itself starts from the next line and then displays two linebreaks. That is because your #charPrint::after is set to display: block. This will cause it to create its own block starting from the next line. Then it will display two linebreaks based on its content property.

It renders like this:

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

This is why you are seeing an extra break in the first div.

To solve this, just make your ::after pseudo-element inline instead of block, which will make it render like this:

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

Fiddle: http://jsfiddle.net/6Lkxr2x6/1/

Snippet:

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