html - Unicode 作为元素符号不缩进第二行

Question

我有什么:

使用 Unicode 字符作为元素符号的无序列表。

我使用this实现了这一点回答这个问题:Unicode character as bullet for list-item in CSS

我的问题:

我使用的解决方案仅对单行列表项有效。对于多行列表项，第二行(以及所有后续行)的文本不是缩进，而是放在元素符号下方。

我的代码:

ul {
  list-style: none;
  padding: 0px;
}

ul li:before {
  content: '\2713';
  margin: 0 1em;
  /* any design */
}

<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>

我的问题:

是否有 CSS 解决方案(无需编辑标记)可以防止文本落在 Unicode 元素符号下？

Answer 1

您可以在 li 元素上使用 display: flex 属性。或者，您可以在 li 元素上使用 display: table ，在伪元素上使用 display: table-cell 。 DEMO

ul {
  list-style: none;
  padding: 0px;
}
li {
  display: flex;
}
ul li:before {
  content: '\2713';
  margin: 0 1em;
}

<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>