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

Consider this simple snippet:

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

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

As you can see, the list items overflow the box.

But just let's add list-style-position: inside; and then they suddenly stop:

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

ul {
  list-style-position: inside;
}

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

This breaking right after the bullet looks most ugly to me. I would like to prevent this from happening; I would rather like overflow.

But I still want list-style-position to be set to inside because I want to have full control on the position of the bullet.

Is there any way to do both? Can I prevent this linebreak right after the bullet while keeping list-style-position set to inside?

You can use white-space: nowrap; on the list items:

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>