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

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

CSS ソリューション:

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

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

JavaScript ソリューション:

あるいは、次のようにします。 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');
};

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