Can Select List Options Be Wrapped and Indented?

Can Select List Options Wrap and Indent Text?

Creating select lists with long option values can pose formatting challenges. Unfortunately, standard HTML tags cannot wrap or indent text.

Custom Solution

To achieve wrapping and indentation, one may consider implementing a custom solution. Instead of using native tags, create a custom drop-down menu through JavaScript or a menu plugin.

This approach offers flexibility in text formatting and allows for dynamic adjustments to accommodate varied option lengths.

Example:

<div>
<pre class="brush:php;toolbar:false">const menu = document.getElementById('my-menu');

// Apply custom formatting to long options
menu.querySelectorAll('li').forEach(option => {
  if (option.offsetWidth > menu.offsetWidth) {
    option.style.whiteSpace = 'nowrap';
    option.style.marginLeft = '1em';
  }
});

Alternatives

If implementing a custom solution is not viable, an alternative approach involves trimming long option values. However, this may not always provide the desired visual effect.