CSS содержание символов - \ A занимает больше места, чем бр тег

Question

добавляю символы новой строки, используя либо символ \A (или) строки тег разрыва, br

Но я вижу, когда я использую характер содержимого CSS - \A , он занимает больше высоты, чем тег br.

Jsfiddle находится, http://jsfiddle.net/6Lkxr2x6/

ли не br тег и \A представляют один символ новой строки?

Answer 1

Но я вижу, когда я использую характер содержимого CSS - \ А, это занимает больше высоту чем тег br.

Это не занимает больше высоты, чем br тег. Разница в том, что в вашем следующем div в примере первый 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] 

Скрипки: http://jsfiddle.net/6Lkxr2x6/1/

Отрывок:

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

Если вы хотите \A вести себя как <br> тег, вам необходимо установить его, как это ...

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

Подробнее в this StackOver flow question.

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 linebreakes. Первый linebreak уже находится на новой строке, поэтому tou получает две пустые строки.

<br><br> 

И здесь у вас нет на PECIAL блок, и первый перевод строки в конце строки текста, а второй является сама по себе. Существует только одна пустая строка.

---

В первом примере вам нужно удалить display:block: http://jsfiddle.net/6Lkxr2x6/2/