css - 使用 CSS 在未元素符号列表上悬挂缩进

Question

我正在尝试创建一个 <ul>没有元素符号(即 list-style-type: none )，其中元素有一个悬挂缩进(除了第一行之外的所有行都缩进)。我不是说所有<li>在第一个之后应该缩进——而不是，如果 <li>跨越多行，第一行之后的所有行都应在 <li> 内缩进.我怎样才能做到这一点？

到目前为止我已经尝试过:

• text-indent: 5px hanging :没有效果，hanging尚不支持
• text-indent: -5px; padding-left: 5px : 发现了这个技巧 here , 但它在这种情况下不起作用
• this SO question 的解决方案，它不适用于非元素符号列表

注意:我知道我可以通过其他方式实现这一点(例如使用 <p> 而不是列表)，但我想知道是否可以使用 <ul> .

Answer 1

您可以添加一些填充和负数 text-indent。

ul {
  list-style: none;
  padding-left: 40px; /* Most browsers already have this by default */
}
li {
  text-indent: -20px;
}

<ul>
  <li>Hello<br />world<br />foo bar</li>
</ul>