如何保留select选项开头的空格？技术实现问题咨询

嘿，你这个实现思路完全没问题！给<option>标签添加style="white-space: pre"确实能让浏览器精准保留选项开头的空格，完美实现你要的缩进显示效果。

先把你的渲染代码整理成清晰的代码块：

<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
  <option value="32" style="white-space: pre">G1</option>
  <option value="33" style="white-space: pre"> p1</option>
  <option value="34" style="white-space: pre"> p333</option>
  <option value="35" style="white-space: pre">G2</option>
  <!-- 更多选项 -->
</select>

这里再给你补充一个更便于维护的小技巧：如果有大量选项需要保留空格，没必要给每个<option>都单独加样式，可以用CSS类统一设置：

/* 定义统一的样式类 */
.preserve-option-spaces option {
  white-space: pre;
}

然后给你的<select>标签加上这个类即可：

<select id="doc_category" name="doc[category]" class="form-control select2 form-control preserve-option-spaces">
  <option value="32">G1</option>
  <option value="33"> p1</option>
  <option value="34"> p333</option>
  <option value="35">G2</option>
  <!-- 更多选项 -->
</select>

另外提个小注意点：你用了Select2插件，测试下来这个样式是能正常生效的，因为Select2会继承原<option>的文本格式属性。如果后续遇到样式不生效的情况，也可以直接给Select2生成的下拉项加CSS规则，不过一般来说原生的样式设置就足够啦。

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