如果列表样式位置设置为内部，如何防止列表项在项目符号后立即中断？

Question

考虑这个简单的片段：

div {
  width: 100px;
  border: 1px solid black;
}

<div>
  <ul>
    <li>AnArbitrary</li>
    <li>ListElement</li>
  </ul>
</div>

如您所见，列表项溢出框。

但是只要我们添加 list-style-position: inside; 然后他们突然停止:

div {
  width: 100px;
  border: 1px solid black;
}

ul {
  list-style-position: inside;
}

<div>
  <ul>
    <li>AnArbitrary</li>
    <li>ListElement</li>
  </ul>
</div>

在我看来，子弹之后的这种断裂非常难看。我想防止这种情况发生；我宁愿溢出。

但是我还是希望list-style-position设置为inside因为我想完全控制子弹的位置

有什么办法可以同时做到吗？我可以在将 list-style-position 设置为 inside 的同时防止在项目符号之后立即换行吗？

Answer 1

您可以在列表项上使用 white-space: nowrap;：

div {
  width: 100px;
  border: 1px solid black;
}

ul {
  list-style-position: inside;
}

li {
  white-space: nowrap;
}

<div>
  <ul>
    <li>AnArbitrary</li>
    <li>ListElement</li>
  </ul>
</div>

How to prevent the list item from breaking right after the bullet if list-style-position is set to inside?