選択ボックスのオプションの幅を制御し、テキストの省略記号を実装する方法は?

選択ボックス オプションの幅の制御

HTML では、選択要素とその子オプション要素の両方にスタイル属性を適用することで、各オプションの幅を指定して、選択ボックスの幅と一致するようにすることができます。ただし、CSS だけでこれを実現するのは十分ではない可能性があります。

解決策の 1 つは、オプションの幅をさらに制御し、必要に応じてテキストの省略記号を有効にするために JavaScript を組み込むことです。提供されている JavaScript コードでは、.short クラスと data-limit 属性を持つオプション要素内のテキストを動的に調整する shortString 関数が導入されています。

このソリューションを実装する方法は次のとおりです。

<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>

この方法では、オプションの幅が選択ボックスの幅と同じになるようにし、オプションのテキストが指定された制限を超えると、超過したテキストが省略記号に置き換えられます。

以上が選択ボックスのオプションの幅を制御し、テキストの省略記号を実装する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。