JavaScript を使用して選択ボックスのオプションの幅を制御し、テキストのオーバーフロー省略記号を実装するにはどうすればよいですか?

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

選択ボックスでは、オプションがボックス自体よりも視覚的に広く、位置がずれています。これを修正するには、オプションの幅をボックスの幅と同じに設定することを目指します。さらに、長いテキストを含むオプションにテキスト オーバーフローの省略記号を実装したいと考えています。

従来の CSS アプローチ

最初は CSS を使用した解決策を試みましたが、無駄であることが判明しました。 CSS だけでは、選択ボックス内のオプションの幅を直接制御する手段は提供されません。

JavaScript 介入

CSS では解決策を提供できないため、 JavaScript の代替手段。指定した JavaScript コードは、選択ボックス内のオプションのテキスト幅を正常に変更します。これは、各オプション要素を反復処理し、必要に応じてその内部テキストを変更することで機能します。

HTML および CSS の変更

HTML で、data-limit 属性を各オプション要素で、許可される最大テキスト長を指定します。 CSS では、選択ボックスとオプションの両方に 250 ピクセルの固定幅を設定します。

コード スニペット

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');
};

デモ

このスクリプトを実行すると、指定された制限を超えるテキスト長のオプションは省略記号で切り詰められ、選択範囲内に確実に収まるようになります。ボックスの幅

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