Question

我想悬挂缩进'子弹' - 这是包裹的行在顶行前缀后缩进的段落（即“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和值 - 缩进和填充左侧以实现正确的悬挂缩进。

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

Answer 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>

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

1 个答案: