Comment contrôler la largeur des options de la zone de sélection

Lorsque les options d'une zone de sélection s'étendent au-delà de la largeur de la zone, cela peut créer un désordre et une apparence encombrante. Pour résoudre ce problème, nous pouvons utiliser à la fois CSS et JavaScript pour personnaliser la largeur des options et tronquer tout texte en excès.

Approche CSS :

Bien que CSS seul ne soit pas suffisant pour définir la largeur des options, nous pouvons l'utiliser pour fixer la largeur de la zone de sélection elle-même. En définissant la largeur de l'élément select, les options seront contraintes à l'intérieur de cette limite. De plus, nous pouvons déborder comme masqué pour masquer toutes les options qui dépassent la largeur de la boîte, conduisant à un effet de points de suspension sur les options plus longues.

select {
    width: 250px;
}

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

Approche JavaScript :

Pour un contrôle plus fin sur la largeur des options, on peut se tourner vers JavaScript. L'extrait de code suivant dimensionne dynamiquement les options pour qu'elles correspondent à la largeur de la zone de sélection et tronque tout texte de débordement à l'aide de 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');
};

Approche combinée :

En combinant les approches CSS et JavaScript, nous pouvons obtenir un contrôle optimal sur la largeur et le comportement de débordement des options de la zone de sélection. Les règles CSS garantissent que la zone de sélection reste dans sa largeur désignée, tandis que le code JavaScript ajuste dynamiquement la largeur des options et tronque tout texte en excès.