【问题标题】:how to add em space ( ) after BR tag using CSS如何使用 CSS 在 BR 标签后添加 em 空格( )
【发布时间】:2019-09-24 23:57:15
【问题描述】:

我想在 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>

【问题讨论】:

  • 请注意,::after 插入为所选元素的last child,而不是元素之后。

标签: html css line-breaks text-indent


【解决方案1】:

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

此外,还有一个 CSS 属性 text-indent 也可以实现您所追求的文本缩进。

基本上,按预期使用&lt;p&gt;(例如换行),然后将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 了解更多信息。

【讨论】:

  • 这是一个框架挑战,因为不应该像这样使用 BR 标签,并且有一种内置的方式来做文本缩进,这种方式一直存在。
【解决方案2】:

我设法在 BR 标签后添加了一个 em 空格!

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

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

另一个问题是我还想保持 1em 的边距底部。以下样式 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>

【讨论】:

  • 我的意思是,你不应该使用这样的 BR 标签。除此之外,这基本上正是 text-indent 属性的用途。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-07
  • 1970-01-01
  • 2017-02-28
相关资源
最近更新 更多