如何在Firefox中实现<select>选项文本多行换行？

问题根源 #

Firefox默认给<option>设置了white-space: nowrap属性，强制文本保持单行不换行；而Chrome、Safari这类WebKit内核的浏览器，会自动识别文本长度并处理换行逻辑。所以咱们的核心目标就是修改这个关键属性，再配合一些样式优化。

解决方案（调整你的SASS代码） #

直接给<option>加上white-space: normal，再对<select>做一些基础样式调整，就能让Firefox的下拉选项正常换行了。修改后的代码如下：

select {
  /* 设置下拉框固定宽度，这是触发换行的前提条件 */
  width: 250px;
  /* 移除Firefox默认的下拉样式（可选，若想保留默认箭头可删除此行） */
  -moz-appearance: none;
  appearance: none;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;

  option {
    /* 核心：让Firefox允许文本自动换行 */
    white-space: normal;
    /* 增加内边距，让换行后的文本更美观易读 */
    padding: 0.5rem;
  }
}

关键属性解释 #

• width：必须给<select>设置固定宽度，当文本长度超过这个宽度时，才会触发自动换行逻辑
• white-space: normal：这是解决问题的核心，把Firefox默认的nowrap改成normal，允许文本在需要时自动折行
• padding：给增加内边距，避免换行后的文本紧贴边框，提升整体可读性

额外提示 #

如果你不想去掉Firefox的默认下拉箭头，只需要删掉-moz-appearance: none这一行就行，核心的white-space: normal依然能生效。修改完记得在Firefox里测试一下，看看文本是不是正常换行了~

内容的提问来源于stack exchange，提问作者j.limjinda