如何控制選擇框選項的寬度

當選擇框中的選項超出框的寬度時，可能會造成混亂以及笨拙的外觀。為了解決這個問題，我們可以同時使用 CSS 和 JavaScript 來自訂選項的寬度並截斷任何多餘的文字。

CSS 方法：

雖然單獨使用 CSS 是不行的足以設定選項的寬度，我們可以利用它來固定選擇框本身的寬度。透過設定選擇元素的寬度，選項將被限制在該邊界內。此外，我們可以透過隱藏溢位來隱藏任何超出框寬度的選項，導致較長選項出現省略號效果。

select {
    width: 250px;
}

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

JavaScript 方法：

為了更好地控制選項的寬度，我們可以轉向 JavaScript。以下程式碼片段動態調整選項大小以符合選擇框的寬度，並使用文字溢出截斷任何溢出文字： ellipsis:

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 程式碼則動態調整選項的寬度並截斷任何多餘的文字。