使用 em 单位的 CSS 'bullet' 悬挂缩进答案

【问题标题】：CSS 'bullet' hanging indent using em units使用 em 单位的 CSS 'bullet' 悬挂缩进
【发布时间】：2015-10-14 00:55:20
【问题描述】：

我想悬挂缩进'bullets' - 即在首行前缀（即“1.”或“1a”之后，换行缩进的段落。”

例如看下面的html

<html><body>
<div style="text-indent: -3em; padding-left: 3em;">1. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</body></html>

为什么换行没有在第一个 bla 下缩进？我怎样才能达到这个效果？

我正在寻找的是一个通用公式，以便给定前缀大小，即 3 表示“1.”或 5 表示“1a).”，我可以计算出我需要为文本提供的 css 和值 - indent 和 padding-left 以实现适当的悬挂缩进。

无论文档的字体大小如何，我都希望解决方案保持一致。我也不是在寻找有序列表解决方案。

【问题讨论】：

text-indent 仅适用于元素的第一行。设置-3em 将有效地为您提供您正在体验的结果。

标签： html css

【解决方案1】：

这是一个示例，带有有序列表和 css 计数器。

ol {
  counter-reset: section;                
  list-style-type: none;
  text-indent: -1em;
}

li::before {
  counter-increment: section;
  content: counters(section,".")" ";
  display: inline-block;
  width: 1em;
}

.sub-level {
  counter-reset: inner; 
}

.sub-level li::before {
  counter-increment: inner;
  content: counter(section)"."counter(inner, lower-alpha);
}

<ol class="top-level">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
  <li> quis nostrud
    <ol class="sub-level">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
    </ol>
  </li>
</ol>

【讨论】：

谢谢 .. 我不是在寻找有序列表解决方案