Contrôle de la largeur des options de la zone de sélection

En HTML, en appliquant des attributs de style à la fois à l'élément de sélection et à ses éléments d'option enfants, il est Il est possible de spécifier la largeur de chaque option pour garantir qu'elle correspond à la largeur de la zone de sélection. Cependant, y parvenir avec CSS seul peut ne pas suffire.

Une solution consiste à incorporer JavaScript pour contrôler davantage la largeur des options et activer les points de suspension du texte si nécessaire. Le code JavaScript fourni introduit une fonction shortString qui ajuste dynamiquement le texte dans les éléments d'option ayant la classe .short et l'attribut data-limit.

Voici comment implémenter cette solution :

Select your UniversityBangladesh University of Engineering and TechnologyMawlana Bhashani Science and Technology University

select {
  width: 250px;
}

option {
  width: 250px;
}

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 approche garantit que la largeur de l'option est identique à la largeur de la zone de sélection, et lorsque le texte de l'option dépasse la limite spécifiée, le texte en excès est remplacé par des points de suspension.