как добавить em space () после тэга BR с помощью CSS - PullRequest
Новая
       37

как добавить em space () после тэга BR с помощью CSS

0 голосов
/ 25 сентября 2019

Я хочу добавить em-пробел сразу после тэга BR, чтобы добиться эффекта текстового отступа.Но следующий стиль не работает на моем Chrome.

Или любой другой способ добиться эффекта текстового отступа после тега BR? 

<style>
br::after { 
  content: "&emsp;";
}
</style>

<p>Note:<br>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>

Ответы [ 2 ]

1 голос
/ 25 сентября 2019

Вы не должны использовать тег разрыва строки (br) для разбиения абзацев, не в современном веб-дизайне.См. HTML 5.2 spec для некоторых примеров.

Кроме того, есть CSS-свойство text-indent, которое также позволяет получить отступ после текста.

В основном используйте<p> как задумано (например, для переноса абзаца), а затем примените text-indent к тегам p. 

p {
  text-indent: 1em;
}
p.unindented {
  text-indent: inherit;
}
<p class="unindented">Note:</p>
<p>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>
<p>Here is another paragraph to show how this applies when you have more than one &lt;p&gt; of content. The text-indent property is supported by all major browsers. (That is, IE 3 and later. Not that IE is a major browser anymore....)</p>
<p>See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent</p>

text-indent - это очень старое свойство с широкой поддержкой во всех основных браузерах, а также во многих старых.Впервые он был введен в IE 3, чтобы дать представление о том, сколько ему лет.См. MDN для получения дополнительной информации.

0 голосов
/ 25 сентября 2019

Мне удалось сделать это, чтобы добавить пробел em сразу после тега BR! 

<style>
br {
  content: '';
  white-space: pre;
}

br::after { 
  content: "\A\2003";
}
</style>

Еще одна проблема заключается в том, что я также хочу сохранить 1em margin-bottom.Следующий стиль ALONE работает хорошо. 

<style>
br {
  content: '';
  display: block; 
  margin-bottom: 1em; 
}
</style>

НО, если я смешал два стиля в следующем, он не работает !!! 

<style>
br {
  content: '';
  white-space: pre;
  display: block; 
  margin-bottom: 1em; 
}

br::after { 
  content: "\A\2003";
}
</style>
...