選択ボックス オプションの幅を制御する方法

選択ボックス内のオプションがボックスの幅を超えると、乱雑な状態になる可能性があります。そして扱いにくい外観。この問題に対処するには、CSS と JavaScript の両方を使用してオプションの幅をカスタマイズし、余分なテキストを切り詰めることができます。

CSS アプローチ:

CSS だけでは解決できません。オプションの幅を設定するには十分ですが、選択ボックス自体の幅を固定するために利用できます。 select 要素の幅を設定すると、オプションはその境界内に制限されます。さらに、ボックスの幅を超えるオプションを隠すために非表示としてオーバーフローすることができ、長いオプションに省略記号の効果が生じます。

select {
    width: 250px;
}

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

JavaScript アプローチ:

オプションの幅をより細かく制御するには、JavaScript を使用します。次のコード スニペットは、選択ボックスの幅に一致するようにオプションのサイズを動的に変更し、text-overflow を使用してオーバーフロー テキストを切り捨てます。 const 要素 = document.querySelectorAll(selector); const テール = '...'; if (要素 && 要素.長さ) { for (要素の const 要素) { 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}`; } } それ以外 { throw Error('属性 \'data-limit\'' が見つかりません); } } } } window.onload = function() { shortString('.short'); };

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

CSS と JavaScript のアプローチを組み合わせることで、選択ボックス オプションの幅とオーバーフロー動作を最適に制御できます。 CSS ルールにより、選択ボックスが指定された幅内に収まることが保証され、JavaScript コードによりオプションの幅が動的に調整され、余分なテキストが切り詰められます。