How to Control the Width of Select Box Options

When options within a select box extend beyond the box's width, it can create an untidy and unwieldy appearance. To address this issue, we can employ both CSS and JavaScript to customize the options' width and truncate any excess text.

CSS Approach:

While CSS alone is not sufficient to set the width of options, we can utilize it to fix the width of the select box itself. By setting width for the select element, the options will be constrained within that boundary. Additionally, we can overflow as hidden to conceal any options that exceed the box's width, leading to an ellipsis effect on longer options.

select {
    width: 250px;
}

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

JavaScript Approach:

For finer control over the options' width, we can turn to JavaScript. The following code snippet dynamically sizes the options to match the width of the select box and truncates any overflow text using text-overflow: 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');
};

Combined Approach:

By combining the CSS and JavaScript approaches, we can achieve optimal control over the width and overflow behavior of select box options. The CSS rules ensure the select box remains within its designated width, while the JavaScript code dynamically adjusts the options' width and truncates any excess text.