Steuern der Breite von Auswahlfeldoptionen

In HTML wird dies durch Anwenden von Stilattributen sowohl auf das Auswahlelement als auch auf seine untergeordneten Optionselemente erreicht Es ist möglich, die Breite jeder Option anzugeben, um sicherzustellen, dass sie mit der Breite des Auswahlfelds übereinstimmt. Allerdings reicht es möglicherweise nicht aus, dies mit CSS allein zu erreichen.

Eine Lösung besteht darin, JavaScript zu integrieren, um die Optionsbreite weiter zu steuern und bei Bedarf Textauslassungspunkte zu aktivieren. Der bereitgestellte JavaScript-Code führt eine shortString-Funktion ein, die den Text in Optionselementen mit der Klasse .short und dem Attribut data-limit dynamisch anpasst.

So implementieren Sie diese Lösung:

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

Dieser Ansatz stellt sicher, dass die Breite der Option mit der Breite des Auswahlfelds identisch ist. Wenn der Optionstext den angegebenen Grenzwert überschreitet, wird der überschüssige Text durch Auslassungspunkte ersetzt.