Select2多选框占位符文本底部被截断，如何通过CSS修复？

如图所示，Select2多选选择器的占位符文本底部出现截断，可通过调整CSS规则解决，以下是具体方案：

问题原因 #

该截断通常是Select2生成的多选选择框内边距不足、行高设置不合理，或是与你使用的Tailwind样式冲突，导致占位符文本没有足够垂直空间完整展示。

解决方案 #

添加针对性的CSS规则，调整选择框的内边距、最小高度和行高：

.select2-container {
  width: 100% !important;
}

/* 适配Tailwind表单样式，给多选选择框足够垂直空间 */
.select2-container .select2-selection--multiple {
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
  line-height: 1.5;
}

/* 确保占位符文本行高继承，避免浏览器默认样式截断 */
.select2-container .select2-search--inline .select2-search__field::placeholder {
  line-height: inherit;
}

完整代码示例 #

<style>
    .select2-container {
      width: 100% !important;
    }

    .select2-container .select2-selection--multiple {
      padding: 0.5rem 0.75rem;
      min-height: 2.5rem;
      line-height: 1.5;
    }

    .select2-container .select2-search--inline .select2-search__field::placeholder {
      line-height: inherit;
    }
</style>

<label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">Language(s)</label>
<div class="mt-2 w-full">
  <select class="select-language w-full rounded-md" name="languages" multiple="multiple">
    {% for language in languages %}
      <option value="{{ language }}">{{ language }}</option>
    {% endfor %}
  </select>
</div>

<script>
$('.select-language').select2({
        placeholder: 'Select languages',
        allowClear: true,
        multiple: true
});
</script>

规则说明 #

• padding 和 min-height 确保选择框垂直空间充足，与你使用的Tailwind表单元素内边距保持一致
• line-height 调整文本行高，让占位符垂直居中且不被截断
• 强制占位符继承行高，规避浏览器默认样式导致的文本截断问题

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