ホームページ > ウェブフロントエンド > CSSチュートリアル > 選択ボックスのオプションの幅を制御し、テキストの省略記号を実装する方法は?

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

Mary-Kate Olsen
リリース: 2024-10-28 17:45:29
オリジナル
378 人が閲覧しました

How to Control the Width of Select Box Options and Implement Text Ellipsis?

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート