To stop text from wrapping and add an ellipsis overflow effect use
has-overflow-ellipsis.
Sometimes you might want to control the truncation length. For that a custom property can be set on
the element using an inline style tag style="--length: 25". The length uses the ch unit
resulting in a width roughly equivalent to the value in characters.
If you want a list item's controls to be visible all the time, the
has-visible-pointer-controls modifier can be used.
