Cómo controlar el ancho de las opciones del cuadro de selección

Cuando las opciones dentro de un cuadro de selección se extienden más allá del ancho del cuadro, se puede crear un ambiente desordenado. y apariencia difícil de manejar. Para solucionar este problema, podemos emplear CSS y JavaScript para personalizar el ancho de las opciones y truncar cualquier texto sobrante.

Enfoque CSS:

Si bien CSS por sí solo no es suficiente para establecer el ancho de las opciones, podemos utilizarlo para fijar el ancho del cuadro de selección. Al establecer el ancho para el elemento seleccionado, las opciones se limitarán dentro de ese límite. Además, podemos desbordar como oculto para ocultar cualquier opción que exceda el ancho del cuadro, lo que genera un efecto de elipsis en opciones más largas.

select {
    width: 250px;
}

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

Enfoque de JavaScript:

Para un control más preciso sobre el ancho de las opciones, podemos recurrir a JavaScript. El siguiente fragmento de código dimensiona dinámicamente las opciones para que coincidan con el ancho del cuadro de selección y trunca cualquier texto desbordado usando text-overflow: puntos suspensivos:

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');
};

Enfoque combinado:

Al combinar los enfoques CSS y JavaScript, podemos lograr un control óptimo sobre el ancho y el comportamiento de desbordamiento de las opciones del cuadro de selección. Las reglas CSS garantizan que el cuadro de selección permanezca dentro de su ancho designado, mientras que el código JavaScript ajusta dinámicamente el ancho de las opciones y trunca cualquier texto sobrante.