Question

我有一个像这样的列表：

<ol>
<li>2017 &mdash; Lorem ipsum blah blah blah blah blah blah blah blah blah.
<li>2018 &mdash; Lorem ipsum blah.
</ol>

当前显示如下：

* 2017 — Lorem ipsum blah blah blah blah 
  blah blah blah blah blah.
* 2018 - Lorem ipsum blah.

我想要的是让它像这样包装：

* 2017 — Lorem ipsum blah blah blah blah 
         blah blah blah blah blah.
* 2018 - Lorem ipsum blah.

在QuarkXPress中，您可以输入一个特殊的隐藏字符，以强制从该点到下一段返回的所有文本行缩进。（在上面的示例中，这个特殊的隐藏字符将在“ L”之前。）这就是我在CSS中所追求的—这样的东西存在吗？

Answer 1

您可以使用伪元素和计数器来实现此目的：

ol {
  counter-reset: section 2016;
  list-style:none;
}
ol li {
  display:flex;
}

li::before {
  counter-increment: section; 
  content: counter(section) " — "; 
  margin-right:5px;
  flex-shrink:0;
}

<ol>
<li>Lorem ipsum blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah.</li>
<li>Lorem ipsum blah.</li>
</ol>

CSS-换行符上的缩进列表换行到字符位置

1 个答案: