Wie steuere ich die Breite der Auswahlfeldoptionen?

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 Breite der Optionen mit der Breite des Auswahlfelds übereinstimmt, wenden wir den CSS-Stil an.

CSS-Lösung:

<code class="css">select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}</code>

Durch Festlegen der Breite Wenn wir sowohl das Auswahlfeld als auch seine Optionen auf 250 Pixel vergrößern, erzwingen wir die gewünschte Breite. Zusätzlich wenden wir die overflow:hidden-Eigenschaft 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 Aufgrund möglicher Unterschiede in den Rendering-Engines beschränkt die Lösung die Optionsbreiten möglicherweise nicht vollständig auf die genaue Größe des Auswahlfelds in allen Browsern.

Javascript-Lösung:

Alternativ: Es kann eine JavaScript-Funktion implementiert werden, um die Optionsbreiten basierend auf einer angegebenen Grenze dynamisch anzupassen:

<code class="js">function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements &amp;&amp; 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');
};</code>

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

Das obige ist der detaillierte Inhalt vonWie steuere ich die Breite der Auswahlfeldoptionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!