javascript - ul li 第二行文本在使用 li :before 后未正确对齐

Question

这是一个常见的问题，但我似乎无法解决它。我试图寻找答案，但仍然没有解决我的问题。

我有一个 ul li。 li 设置为 list-style:none，我使用 li:before 来放置自定义元素符号。

我面临的问题是，当容器较小时，第二行文本与上面的文本不对齐。

我想获得与右上图相同的结果。 如何完美对齐第二行文本？

感谢您的帮助。

编辑:

This is my sample code from <a href="http://jsfiddle.net/bo1nvxop/">jsfiddle</a> 

Answer 1

这是一个使用 + 作为要点的工作示例。根据您将用于要点的字符，您可能需要调整负文本缩进。

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -0.825em;
}

ul li:before {
  content: "+ ";
}

<ul>
  <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
  <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
</ul>