本文详解 materialize 框架中复选框（checkbox）选项文本过长导致重叠、换行失效的问题，提供兼容性强、无需修改 materialize 源码的纯 html/css 修复方案，并附可直接运行的代码示例与关键注意事项。
本文详解 materialize 框架中复选框（checkbox）选项文本过长导致重叠、换行失效的问题，提供兼容性强、无需修改 materialize 源码的纯 html/css 修复方案，并附可直接运行的代码示例与关键注意事项。
在使用 Materialize CSS 构建在线测验（Quiz）表单时，一个常见但易被忽视的布局问题是：当复选框（）后跟随大段答案文本时，Materialize 默认的 .filled-in 样式与 label 内联结构会导致文本换行异常、行高塌陷，最终出现多行文字视觉重叠——即后一行文字覆盖前一行底部，严重影响可读性与用户体验（如题图所示）。
根本原因在于 Materialize 的 checkbox 封装逻辑：它将 和 均置于同一行内级 label 中，并依赖 display: inline-block 和固定 line-height 控制布局。一旦文本长度超出单行容纳范围，span 缺乏明确的块级上下文与高度自适应能力，就会挤压垂直间距，造成视觉重叠。
✅ 推荐解决方案（轻量、稳定、零 JS 依赖）
只需两处语义化结构调整，即可彻底解决：
-
将每个 label 包裹在独立的块级容器中（如 ），确保每个选项拥有清晰的布局边界；
- 为 添加 style="height: auto;"，解除 Materialize 可能施加的固定高度限制，使其真实包裹内容。
以下是修复后的关键代码片段（仅展示第一个选项，其余同理）：
<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>? 进阶优化建议（提升健壮性）
若项目中复选框较多，推荐通过 CSS 类统一管理，避免重复内联样式：<!-- 在 head 中添加 --> <style> .materialize-checkbox-fix label span { height: auto !important; display: block; margin-top: 4px; /* 可选：微调文本与控件的垂直间距 */ } </style><!-- 对应 HTML 结构 --> <div class="materialize-checkbox-fix"> <div class="row"> <div class="input-field col s12"> <div> <label> <input type="checkbox" name="ans_a" value="A"> <span>Lorem ipsum...</span> </label> </div> </div> </div> </div>⚠️ 重要注意事项
- ✅ 此方案兼容 Materialize v1.x 全版本（含 1.0.0），无需升级或替换框架；
- ❌ 切勿仅通过 line-height 或 min-height 强行拉高——这会破坏响应式行为，且对不同字号/设备适配差；
- ⚠️ 若使用 JavaScript 动态渲染选项，请确保 DOM 插入后也应用相同结构（即 div > label > input + span[style="height:auto"]）；
- ? 调试技巧：在浏览器开发者工具中检查 元素的 computed height，修复后应显示为实际内容高度（如 48px），而非 16px 或 auto 但渲染异常。
通过上述结构优化，所有答案文本将自动按内容换行、正确撑开行高，彻底消除重叠现象，同时保持 Materialize 原有交互效果（如波纹动画、焦点状态）与响应式栅格完整性。该方法简洁、可维护性强，是 Materialize 表单中长文本选项的标准实践。
