本文详解 materialize 1.0+ 框架下多行长文本复选框（checkbox）出现文字重叠、行高塌陷的问题根源，并提供无需手动设固定高度、兼容响应式的标准修复方案。

本文详解 materialize 1.0+ 框架下多行长文本复选框（checkbox）出现文字重叠、行高塌陷的问题根源，并提供无需手动设固定高度、兼容响应式的标准修复方案。

在使用 Materialize CSS 构建在线测验（Quiz）表单时，一个常见但易被忽视的问题是：当复选框（）后跟随大段说明文本时，文本内容会相互重叠或换行错位——即使 HTML 结构看似规范，视觉上仍表现为“文字压在一起”或“多选项垂直间距不一致”。其根本原因在于 Materialize 对 .form-check 类（实际由 label 包裹 checkbox 的结构）的默认样式中，span 标签被赋予了 display: inline 和隐式 vertical-align: baseline 行内行为，且未设置足够的最小行高（min-height）或自适应高度策略，导致长文本换行后容器无法自动撑开，进而引发视觉重叠。

✅ 正确修复方式（推荐且稳定）

Materialize 官方文档虽未明确强调此场景，但经实践验证，以下两步修改即可彻底解决该问题，无需修改 Materialize 源码、不依赖 JavaScript、完全 CSS 驱动，且保持响应式特性：

1. 将每个 外层包裹一层

   
   Materialize 的 checkbox 渲染逻辑依赖于 label 的块级上下文表现。直接将 label 置于 .row > .col 内时，其内部行内元素（如 span）易受父容器 line-height 或 padding 影响而失高。添加一层语义中性、默认块级的

   可确保 label 获得独立的块格式化上下文（BFC），从而正确容纳多行内容。

2. 为 显式声明 style="height: auto;"
   虽然 height: auto 是元素默认值，但在某些 Materialize 版本（尤其是 1.0.0）的 CSS 优先级链中，可能存在未预期的 height: 1rem 或 min-height 覆盖。显式设置 height: auto 可强制覆盖潜在干扰，确保 span 高度随字体行数自然伸缩。

✅ 修改后的标准代码示例：

<!-- 原有问题写法（会导致重叠） -->
<label>
  <input type="checkbox" name="ans_a" value="A">
  <span>超长答案文本……</span>
</label>

<!-- ✅ 正确修复写法（推荐） -->
<div>
  <label>
    <input type="checkbox" name="ans_a" value="A">
    <span style="height: auto;">超长答案文本……</span>
  </label>
</div>

在你的实际代码中，需对每个选项（共 3 处）进行相同处理，例如：

<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_a" id="ans_a" value="A">
        <span style="height: auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</span>
      </label>
    </div>
  </div>
</div>
<!-- 同理处理 ans_b、ans_c -->

⚠️ 注意事项与进阶建议

• 避免滥用 !important 或全局重置：不要通过 .label span { height: auto !important; } 全局覆盖，这可能破坏其他组件（如单行短标签）的紧凑布局。
• 配合 margin-bottom 提升可读性（可选）：若希望选项间留有更清晰的呼吸感，可在外层
  上添加 style="margin-bottom: 16px;"，而非调整 label 内部间距。
• Materialize 2.x 用户注意：新版已优化表单组件的弹性布局，默认支持多行文本；若升级至 v2+，此问题通常不再出现，但仍建议保留
  包裹结构以保证最大兼容性。
• 无障碍（a11y）合规性：上述修改完全符合 WCAG 标准， 仍正确关联 input，屏幕阅读器可正常播报完整文本。

通过以上简洁、精准的结构调整，你即可一劳永逸地解决 Materialize 中长文本复选框的视觉重叠问题——既保持框架原生风格，又赋予内容真正的自适应能力。

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