Comment puis-je contrôler la largeur des options de la zone de sélection et implémenter des points de suspension de débordement de texte à l'aide de JavaScript ?

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

Dans votre zone de sélection, les options sont visuellement plus larges que la zone elle-même, créant un désalignement. Pour remédier à cela, vous visez à définir la largeur des options égale à celle de la boîte. De plus, vous souhaitez implémenter des points de suspension de débordement de texte pour les options avec un texte long.

Approche CSS conventionnelle

Au départ, vous avez tenté une solution utilisant CSS, qui s'est avérée futile. CSS seul ne fournit pas un moyen de contrôler directement la largeur des options dans une zone de sélection.

Intervention JavaScript

Comme CSS ne pouvait pas offrir de solution, vous avez recherché un alternative en JavaScript. Le code JavaScript que vous avez fourni modifie avec succès la largeur du texte des options dans la zone de sélection. Il fonctionne en itérant sur chaque élément d'option et en modifiant son texte interne si nécessaire.

Modifications HTML et CSS

Dans votre HTML, vous avez ajouté l'attribut data-limit à chaque élément d'option pour spécifier la longueur de texte maximale autorisée. Dans votre CSS, vous définissez une largeur fixe de 250 px pour la zone de sélection et les options.

Extrait de code

Voici un extrait du code 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');
};

Démo

Lorsque vous exécutez ce script, les options dont la longueur de texte est supérieure à la limite spécifiée seront tronquées avec des points de suspension, garantissant qu'elles correspondent à la sélection. largeur de la boîte.

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!