So steuern Sie die Breite von Auswahlfeldoptionen

Wenn Optionen innerhalb eines Auswahlfelds über die Breite des Felds hinausgehen, kann es zu Unordnung kommen und unhandliches Aussehen. Um dieses Problem zu lösen, können wir sowohl CSS als auch JavaScript verwenden, um die Breite der Optionen anzupassen und überschüssigen Text abzuschneiden.

CSS-Ansatz:

CSS allein reicht jedoch nicht aus Ausreichend, um die Breite der Optionen festzulegen, können wir damit auch die Breite des Auswahlfelds selbst festlegen. Durch Festlegen der Breite für das Auswahlelement werden die Optionen innerhalb dieser Grenze eingeschränkt. Darüber hinaus können wir den Überlauf als ausgeblendet verwenden, um alle Optionen zu verbergen, die über die Breite des Felds hinausgehen, was bei längeren Optionen zu einem Auslassungseffekt führt.

select {
    width: 250px;
}

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

JavaScript-Ansatz:

Für eine genauere Kontrolle über die Breite der Optionen können wir auf JavaScript zurückgreifen. Der folgende Codeausschnitt passt die Optionen dynamisch an die Breite des Auswahlfelds an und schneidet jeglichen Überlauftext mithilfe von text-overflow ab: ellipsis:

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

Kombinierter Ansatz:

Durch die Kombination der CSS- und JavaScript-Ansätze können wir eine optimale Kontrolle über die Breite und das Überlaufverhalten von Auswahlfeldoptionen erreichen. Die CSS-Regeln stellen sicher, dass das Auswahlfeld innerhalb der vorgesehenen Breite bleibt, während der JavaScript-Code die Breite der Optionen dynamisch anpasst und überschüssigen Text abschneidet.