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

您可以在display: flex元素上使用li属性。或者，您可以在display: table元素上使用li，在伪元素上使用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>

Answer 2

给li左边填充，然后对li:before的宽度和相同的值使用相同的值，但li:before的左边距为负。请务必将li:before显示为inline-block，否则将不会应用width：

＆＃13;

＆＃13;

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

li {
  padding-left: 2em;
}

ul li:before {
  content: '\2713';
  display: inline-block;
  width: 2em;
  margin-left: -2em;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;