Wie kann ich mit JavaScript die Breite von Auswahlfeldoptionen steuern und Textüberlauf-Auslassungspunkte implementieren?

Breite der Auswahlfeldoptionen steuern

In Ihrem Auswahlfeld sind die Optionen optisch breiter als das Feld selbst, was zu einer Fehlausrichtung führt. Um dies zu beheben, möchten Sie die Breite der Optionen auf die Breite des Felds einstellen. Darüber hinaus möchten Sie Textüberlauf-Auslassungspunkte für Optionen mit langem Text implementieren.

Konventioneller CSS-Ansatz

Zunächst haben Sie eine Lösung mit CSS versucht, die sich als erfolglos erwiesen hat. CSS allein bietet keine Möglichkeit, die Breite der Optionen innerhalb eines Auswahlfelds direkt zu steuern.

JavaScript-Intervention

Da CSS keine Lösung bieten konnte, suchten Sie nach einer Alternative in JavaScript. Der von Ihnen bereitgestellte JavaScript-Code ändert erfolgreich die Textbreite der Optionen im Auswahlfeld. Es funktioniert, indem es jedes Optionselement durchläuft und bei Bedarf seinen inneren Text ändert.

HTML- und CSS-Änderungen

In Ihrem HTML haben Sie das Attribut „data-limit“ hinzugefügt jedes Optionselement, um die maximal zulässige Textlänge anzugeben. In Ihrem CSS legen Sie eine feste Breite von 250 Pixeln sowohl für das Auswahlfeld als auch für die Optionen fest.

Code-Snippet

Hier ist ein Ausschnitt des JavaScript-Codes:

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

Demo

Wenn Sie dieses Skript ausführen, werden Optionen mit einer Textlänge, die größer als das angegebene Limit ist, mit Auslassungspunkten abgeschnitten, um sicherzustellen, dass sie in die Auswahl passen Kastenbreite.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript die Breite von Auswahlfeldoptionen steuern und Textüberlauf-Auslassungspunkte implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!