Como controlar a largura das opções da caixa de seleção

Quando as opções dentro de uma caixa de seleção se estendem além da largura da caixa, isso pode criar uma confusão e aparência pesada. Para resolver esse problema, podemos empregar CSS e JavaScript para personalizar a largura das opções e truncar qualquer excesso de texto.

Abordagem CSS:

Embora CSS sozinho não seja suficiente para definir a largura das opções, podemos utilizá-lo para corrigir a largura da própria caixa de seleção. Ao definir a largura do elemento selecionado, as opções serão restritas dentro desse limite. Além disso, podemos transbordar como oculto para ocultar quaisquer opções que excedam a largura da caixa, causando um efeito de reticências em opções mais longas.

select {
    width: 250px;
}

option {
    white-space: nowrap;
    text-overflow: ellipsis;
}

Abordagem JavaScript:

Para um controle mais preciso sobre a largura das opções, podemos recorrer ao JavaScript. O trecho de código a seguir dimensiona dinamicamente as opções para corresponder à largura da caixa de seleção e trunca qualquer texto excedente usando text-overflow: ellipsis:

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

Abordagem combinada:

Ao combinar as abordagens CSS e JavaScript, podemos obter controle ideal sobre a largura e o comportamento de estouro das opções da caixa de seleção. As regras CSS garantem que a caixa de seleção permaneça dentro da largura designada, enquanto o código JavaScript ajusta dinamicamente a largura das opções e trunca qualquer excesso de texto.