Line breaks in options slot

[bttger]

Is your feature request related to a problem? Please describe. If having long option labels the dropdown starts to look bad because of the overflow. See the following picture:

Describe the solution you'd like It would look much better to have line breaks in the options slot by default and thus not having the horizontal overflow and scrolling. I believe that this is quite a common problem.

My current solution through the option slot is:

<template #option="option">
  <div style="white-space: normal; vertical-align: top; display: inline-block; line-break: loose; overflow-wrap: anywhere;">
    <p style="margin: 0;">
      {{ option.label }}
    </p>
  </div>
</template>

We are breaking lines with the 'loose' rule and if any word is longer than the whole inline-block, then we break it with the overflow-wrap: anywhere rule.

[sagalbot]

Looking a lot better https://deploy-preview-1530--vueselect.netlify.app/guide/css.html#option-wrapping-strategy