選択ボックスのオプションの幅を制御するにはどうすればよいですか?

選択ボックス オプションの幅の設定

指定された HTML コードでは、選択ボックス オプションの幅が選択ボックスの幅を超えています。箱自体。この問題を解決し、オプションの幅が選択ボックスの幅と一致するようにするには、CSS スタイルを適用しましょう。

CSS 解決策:

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

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

幅を設定することによって選択ボックスとそのオプションの両方を 250px にすると、希望の幅が適用されます。さらに、overflow: hidden プロパティを適用して、オプションの境界を越えるテキストを非表示にし、テキストが選択ボックスからはみ出さないようにします。

注: ただし、CSSこのソリューションでは、レンダリング エンジンの潜在的な違いにより、すべてのブラウザでオプションの幅が選択ボックスの正確なサイズに完全に制限されない可能性があります。

JavaScript ソリューション:

または、次のようにします。 JavaScript 関数を実装すると、指定された制限に基づいてオプションの幅を動的に調整できます。

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

この関数を使用すると、data-limit 属性を使用して各オプションの幅制限を定義できます。制限を超えるオプションは切り捨てられ、末尾に省略記号 (...) が付けられます。

以上が選択ボックスのオプションの幅を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。