Как предотвратить разрушение элемента списка сразу после маркера, если для параметра list-style-position установлено значение inside?

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>