Définition de la largeur des options de la zone de sélection

Dans le code HTML donné, la largeur des options de la zone de sélection dépasse la largeur de la zone de sélection boîte elle-même. Pour résoudre ce problème et garantir que les largeurs des options s'alignent sur la largeur de la zone de sélection, appliquons le style CSS.

Solution CSS :

select, option {
    width: 250px;
}

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

En définissant la largeur de la zone de sélection et de ses options sur 250 px, nous appliquons la largeur souhaitée. De plus, nous appliquons la propriété overflow: Hidden pour masquer tout texte qui s'étend au-delà des limites de l'option, garantissant ainsi que le texte ne déborde pas de la zone de sélection.

Remarque : Cependant, le CSS La solution peut ne pas restreindre complètement les largeurs des options à la taille exacte de la zone de sélection dans tous les navigateurs en raison de différences potentielles dans les moteurs de rendu.

Solution Javascript :

Alternativement, une fonction JavaScript peut être implémentée pour ajuster dynamiquement les largeurs des options en fonction d'une limite spécifiée :

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

Cette fonction vous permet de définir une limite de largeur pour chaque option à l'aide de l'attribut data-limit. Les options dépassant la limite seront tronquées et suffixées de points de suspension (...).