如何在select的option内容溢出时实现垂直自适应高度？

原生select和option的样式渲染受浏览器限制较多，但通过以下CSS设置，基本能实现文本换行、option垂直缩放以显示全部内容：

可行的CSS配置 #

给option设置强制换行属性，同时取消固定高度，让元素根据内容自动撑开：

select {
  max-height: 200px;
  overflow-y: auto;
  /* 可选：限制select宽度，避免内容过宽导致页面布局错乱 */
  width: 300px;
}

option {
  /* 强制文本换行，默认是不换行 */
  white-space: normal;
  /* 让高度随内容自动调整 */
  height: auto;
  /* 可选：设置最小高度，避免短内容时option过窄 */
  min-height: 40px;
  /* 可选：增加内边距，提升文本可读性 */
  padding: 8px;
}

对应的HTML结构无需大幅修改：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<select class="form-control input-sm" id="purchaserSelect">
  <option>CCCCInvesDD, LC, and Life Company, ASAA Funding, AAAA Acquisition, LLC, BCATAAAA, BCAT 2020-3TT, AAAA, LLC,DDDD Investment Holdings LLC,CCCC Realty Holdings LLC</option>
</select>

兼容性说明 #

不同浏览器对原生option的样式支持存在差异，部分浏览器可能依然会限制option的高度或换行表现，这是原生表单控件的固有局限。如果需要在所有浏览器中实现完全一致的效果，建议用自定义下拉组件：用div、ul、li模拟select和option的结构，通过JavaScript实现下拉展开/收起的交互，这样可以完全自定义文本排版、高度调整等样式。

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