时间戳

首页 > 解决方案 > 如何使用 CSS 在 BR 标签后添加 em 空格（）

html - 如何使用 CSS 在 BR 标签后添加 em 空格（）

问题描述

我想在 BR 标签之后添加一个 em-space 以实现文本缩进效果。但以下 STYLE 不适用于我的 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>

标签： htmlcssline-breakstext-indent

解决方案

你真的不应该使用换行符 (br) 标签来分割段落，而不是在现代网页设计中。有关示例，请参阅HTML 5.2 规范。

此外，还有一个 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。

推荐阅读