如何固定HTML select下拉选项宽度并实现长文本换行

原生<select>是浏览器调用系统渲染能力生成的内置控件，内部的<option>元素不受常规CSS盒模型规则控制，你写的max-width、overflow、white-space属性在Chrome、Edge、Safari等主流浏览器里都不会生效，没有通用的纯CSS方案能直接给原生option加换行效果。

方案1：仅固定宽度+文本截断（无换行，原生select） #

如果不需要换行效果，只要求select本身宽度固定，长文本选中时截断显示，可以直接给select设置固定宽度加截断规则：

select {
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

注意：该方案下下拉弹出的选项列表宽度仍会自适应内容长度，不会换行。仅Firefox浏览器支持给option设置white-space: normal实现换行，其余浏览器完全不兼容，不建议生产环境依赖这个特性。

方案2：自定义组件模拟select（完美支持固定宽度+换行，全浏览器兼容） #

要实现所有浏览器下都生效的固定下拉宽度、长文本自动换行效果，只能用普通HTML标签模拟select的交互逻辑，不受原生控件的渲染限制，示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.custom-select {
  position: relative;
  width: 100px;
  font-size: 14px;
}
.select-trigger {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box;
  z-index: 10;
}
.custom-select.open .select-dropdown {
  display: block;
}
.select-option {
  padding: 6px 8px;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
}
.select-option:hover {
  background: #f0f7ff;
}
</style>
</head>
<body>
  <label for="cars">Choose a car:</label>
  <div class="custom-select" id="carSelect">
    <div class="select-trigger" data-value="">请选择</div>
    <ul class="select-dropdown">
      <li class="select-option" data-value="volvo">Hey this is the problem related to our CSS select option drop down. width is not working in options</li>
      <li class="select-option" data-value="saab">Saab</li>
      <li class="select-option" data-value="opel">Opel</li>
      <li class="select-option" data-value="audi">Audi</li>
    </ul>
  </div>
  <br><br>
  <input type="submit" value="Submit">

  <script>
    const select = document.getElementById('carSelect');
    const trigger = select.querySelector('.select-trigger');
    const options = select.querySelectorAll('.select-option');

    trigger.addEventListener('click', (e) => {
      e.stopPropagation();
      select.classList.toggle('open');
    })

    options.forEach(option => {
      option.addEventListener('click', () => {
        trigger.textContent = option.textContent;
        trigger.dataset.value = option.dataset.value;
        select.classList.remove('open');
      })
    })

    document.addEventListener('click', () => {
      select.classList.remove('open');
    })
  </script>
</body>
</html>

这个方案可以自由控制下拉宽度、文本换行、选项样式，兼容性覆盖所有主流浏览器，是生产环境实现这类需求的通用做法。

内容的提问来源于stack exchange，提问作者Sreehari Avikkal