本文详解 materialize 框架中复选框（checkbox）选项文本过长导致重叠、换行异常的问题，提供兼容性强、无需修改 materialize 源码的 html 结构优化方案，并附可直接运行的修复代码与关键注意事项。

本文详解 materialize 框架中复选框（checkbox）选项文本过长导致重叠、换行异常的问题，提供兼容性强、无需修改 materialize 源码的 html 结构优化方案，并附可直接运行的修复代码与关键注意事项。

在使用 Materialize CSS 构建在线测验（Quiz）表单时，一个常见但易被忽视的布局问题是：当复选框（）后的选项文本较长时，文字会超出容器、与其他选项重叠，甚至出现截断或错位——正如提问者截图所示。根本原因在于 Materialize 1.x 默认对 .filled-in + span 的样式设置了固定行高（line-height）和 display: inline-block 布局，而原生 标签包裹长文本时未形成有效的块级换行上下文，导致多行文本挤压、视觉重叠。

✅ 正确修复方式：结构微调 + 行高重置

Materialize 官方文档并未显式要求特定的 DOM 结构嵌套层级，但其 JavaScript 初始化和 CSS 样式高度依赖语义化结构。问题不在于 CSS 覆盖，而在于 HTML 结构缺失必要的块级容器。以下是经过验证的两步精准修复：

1. 将每个 包裹在独立的
   中（避免 col s12 内联元素流式塌陷）；
2. 为 标签显式设置 style="height: auto;"（解除 Materialize 对 checkbox label 文本容器的固定高度限制，允许自然撑开）。

⚠️ 注意：此方案不修改任何 Materialize CSS 文件，完全通过 HTML 结构优化实现，兼容 Materialize v1.0.0+，且不影响其他表单组件（如 radio、switch）。

? 修复后代码示例（仅展示关键部分）

<!-- 替换前（问题代码） -->
<div class="row">
  <div class="input-field col s12">
    <label>
      <input type="checkbox" name="ans_a" value="A">
      <span>超长选项文本……</span>
    </label>
  </div>
</div>

<!-- 替换后（已修复） -->
<div class="row">
  <div class="input-field col s12">
    <div> <!-- ✅ 新增包裹 div -->
      <label>
        <input type="checkbox" name="ans_a" value="A" class="filled-in">
        <span style="height: auto;">超长选项文本……</span> <!-- ✅ height: auto 强制自适应 -->
      </label>
    </div>
  </div>
</div>

<!-- 同理修复 ans_b 和 ans_c -->
<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_b" value="B" class="filled-in">
        <span style="height: auto;">另一段更长的选项说明，包含多行自然换行，不再重叠。</span>
      </label>
    </div>
  </div>
</div>

<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_c" value="C" class="filled-in">
        <span style="height: auto;">短文本也完全兼容，无额外空白。</span>
      </label>
    </div>
  </div>
</div>

? 进阶建议与注意事项

• 不要滥用 !important：避免通过 CSS 强制覆盖 .form-check .filled-in + span 的 height 或 line-height，这可能破坏 Materialize 的响应式设计逻辑；
• 确保 class="filled-in" 存在：Materialize 复选框需该类触发正确渲染（若缺失，可手动添加）；
• 移动端适配无须额外处理：上述结构在 s12 列下天然支持响应式，长文本在小屏会自动换行并保持垂直间距；
• 批量修复技巧：若项目中存在大量类似结构，推荐使用正则替换（如 VS Code）：

  <label>\s*<input([^>]*?)>\s*<span>([\s\S]*?)<\/span>\s*<\/label>

  替换为：

  立即学习“前端免费学习笔记（深入）”；

  <div><label><input$1><span style="height: auto;">$2</span></label></div>

通过这一轻量级结构优化，即可彻底解决 Materialize 复选框长文本重叠问题，兼顾语义化、可维护性与框架兼容性。无需引入额外 CSS 或 JS，是符合前端最佳实践的“最小改动，最大收益”方案。