Festlegen der Breite der Auswahlfeldoptionen

Im angegebenen HTML-Code überschreitet die Breite der Auswahlfeldoptionen die Breite der Auswahl Box selbst. Um dieses Problem zu beheben und sicherzustellen, dass die Optionsbreiten mit der Breite des Auswahlfelds übereinstimmen, wenden wir den CSS-Stil an.

CSS-Lösung:

select, option {
    width: 250px;
}

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

Indem wir die Breite sowohl des Auswahlfelds als auch seiner Optionen auf 250 Pixel festlegen, erzwingen wir die gewünschte Breite. Darüber hinaus wenden wir die Eigenschaft „overflow:hidden“ an, um jeglichen Text auszublenden, der über die Grenzen der Option hinausgeht, und stellen so sicher, dass der Text das Auswahlfeld nicht überläuft.

Hinweis: Allerdings ist das CSS Die Lösung schränkt die Optionsbreiten aufgrund möglicher Unterschiede in den Rendering-Engines möglicherweise nicht vollständig auf die genaue Größe des Auswahlfelds in allen Browsern ein.

Javascript Lösung:

Alternativ kann eine JavaScript-Funktion implementiert werden, um die Optionsbreiten basierend auf einem angegebenen Grenzwert dynamisch anzupassen:

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');
};

Mit dieser Funktion können Sie mithilfe des data-limit-Attributs eine Breitenbeschränkung für jede Option definieren. Optionen, die das Limit überschreiten, werden gekürzt und mit einem Auslassungszeichen (...) angehängt.