如何控制选择框选项的宽度

当选择框中的选项超出框的宽度时，可能会造成混乱以及笨拙的外观。为了解决这个问题，我们可以同时使用 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 代码则动态调整选项的宽度并截断任何多余的文本。