Comment contrôler la largeur des options de la zone de sélection et implémenter des points de suspension du texte ?

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, c'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 être suffisant.

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 :

<code class="html"><!-- HTML -->
<select name="select" id="select">
  <option class="short" data-limit="37" value="Select your University">Select your University</option>
  <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select></code>

<code class="css"><!-- CSS -->
select {
  width: 250px;
}

option {
  width: 250px;
}</code>

<code class="js"><!-- JavaScript -->
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');
};</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!