Wie kann ich die Breite von Auswahlfeldoptionen steuern und Textauslassungspunkte implementieren?

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:

<code class="html"><!-- HTML -->
<select name="select" id="select">
  <option class="short" data-limit="37" value="Select your University">Select your University</option>
  <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select></code>

<code class="css"><!-- CSS -->
select {
  width: 250px;
}

option {
  width: 250px;
}</code>

<code class="js"><!-- JavaScript -->
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');
};</code>

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

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