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

HTML では、選択要素とその子オプション要素の両方にスタイル属性を適用することで、各オプションの幅を指定して、選択ボックスの幅と一致するようにすることができます。ただし、CSS だけでこれを実現するのは十分ではない可能性があります。

解決策の 1 つは、オプションの幅をさらに制御し、必要に応じてテキストの省略記号を有効にするために JavaScript を組み込むことです。提供されている JavaScript コードでは、.short クラスと data-limit 属性を持つオプション要素内のテキストを動的に調整する shortString 関数が導入されています。

このソリューションを実装する方法は次のとおりです:

Select your UniversityBangladesh University of Engineering and TechnologyMawlana Bhashani Science and Technology University

select {
  width: 250px;
}

option {
  width: 250px;
}

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

この方法では、オプションの幅が選択ボックスの幅と同じになるようにし、オプションのテキストが指定された制限を超えると、超過したテキストが省略記号で置き換えられます。