Maison > interface Web > tutoriel CSS > Comment contrôler la largeur des options de la zone de sélection et implémenter des points de suspension du texte ?

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

Mary-Kate Olsen
Libérer: 2024-10-28 17:45:29
original
378 Les gens l'ont consulté

How to Control the Width of Select Box Options and Implement Text Ellipsis?

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>
Copier après la connexion
<code class="css"><!-- CSS -->
select {
  width: 250px;
}

option {
  width: 250px;
}</code>
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal