如何调整select元素高度自适应option内容避免文本截断

你之前的写法存在两个关键错误，才会出现短选项被撑高的问题：

• 写在<select>标签上的height: 80px控制的是下拉框闭合状态下的整体输入框高度，和下拉展开后单个option的高度无关
• white-space: pre-wrap属性错误加在了select根元素上，没有作用到实际承载文本的option标签，同时固定高度强制所有选项区域按统一值渲染，无法随内容自适应

方案1：纯CSS适配原生select（适合现代浏览器场景） #

直接调整样式作用目标，删除固定高度配置，让option自行根据内容撑开高度，代码示例如下：

<select style='padding: 0.5rem; width: 100%;'>
  <option style='white-space: normal; word-break: break-word; padding: 0.4rem 0.5rem;'>Text 1</option>
  <option style='white-space: normal; word-break: break-word; padding: 0.4rem 0.5rem;'>Text 1 Lots of additional text that needs additional room</option>
  <option style='white-space: normal; word-break: break-word; padding: 0.4rem 0.5rem;'>Text 1 Some extra text</option>
</select>

关键样式说明：

• 删除select根元素上的固定height和无效的white-space: pre-wrap配置
• 将换行样式绑定到每个<option>标签上：white-space: normal允许文本在固定宽度内自然换行，word-break: break-word避免无空格长文本溢出截断
• 用上下padding控制选项的内边距，不设置固定height：短文本选项仅占单行高度加内边距，长文本换行后会自动撑开对应选项的高度，不会出现所有选项高度统一的问题

兼容性提示：部分老旧浏览器（如旧版Safari、IE系列）对原生option的自定义样式支持有限，可能无法识别option上的换行属性，如果需要全浏览器兼容，建议使用方案2。

方案2：自定义元素模拟下拉（全兼容场景推荐） #

如果需要100%控制选项高度样式，可以放弃原生select，用普通div元素模拟下拉交互：

• 用一个div模拟select闭合状态的选中展示框
• 下拉展开的选项列表用普通div渲染，普通块级元素天然支持高度随文本内容自适应，只要给选项加上和方案1一致的换行样式即可
• 额外绑定点击展开/收起、选项选中、值同步的交互逻辑即可
  这个方案的样式可控度最高，不会出现原生控件的样式兼容问题。

内容的提问来源于stack exchange，提问作者David Benz