textarea嵌入时高度失控，根本原因是vertical-align冲突、textarea未重置border/padding/overflow，且的min-height需table-layout:fixed+显式width才生效；可靠方案是设padding:0、box-sizing:border-box，textarea设height与min-height双保险、resize:none、overflow:auto、box-sizing:border-box。

textarea 不是表格原生元素，但常嵌在 里——所以“HTML表格文本域最小高度”本质是两个独立问题叠加：表格单元格的最小行高 + textarea 自身的尺寸约束。直接设 height 或 min-height 在 上不管用，textarea 会撑破它；只调 textarea 又压不住父级 的塌陷。

为什么 textarea 放进 后高度失控？

根本原因是渲染层叠冲突： 默认 vertical-align: middle，而 textarea 是替换元素，默认基线对齐，导致上下留白；同时 textarea 的 resize 行为、默认 overflow: visible、以及未重置的 border 和 padding 都会让实际高度远超设定值。

• textarea 必须显式设 overflow: auto（或 hidden），否则 resize: none 无效
• 要加 box-sizing: border-box，否则 border + padding 会额外加高
• 去掉 默认 padding，否则哪怕 textarea 高度锁死，整体行高还是超标
• 避免把 min-height 写在 上——没 table-layout: fixed + 显式 width，它就是摆设

  textarea 单元格怎么锁死最小高度为 48px？

  适用于后台列表编辑项、单行备注等强约束场景。目标是视觉上严格等高，不因字体缩放、边框或内边距浮动。

  • 设 padding: 0; box-sizing: border-box;
  • textarea 设 min-height: 48px; height: 48px; resize: none; overflow: auto; padding: 8px 12px; box-sizing: border-box;
  • 必须写 height + min-height 双保险：Chrome 对 min-height 在表单元格中支持不稳定，height 才是最终兜底
  • 如果父 没有 table-layout: fixed，加一句 width: 100% 防止列宽坍缩导致高度计算异常

    多行内容下怎么保最小可读高度又不截断？

    用户可能输入换行、粘贴富文本、或开启响应式字号。硬设 height: 48px 会直接隐藏内容，overflow: hidden 更不可取。

    

    Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

    实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

    下载
    • 放弃 height，改用 min-height: 56px（推荐 ≥ 字号 × 1.5 × 2 行，比如字号 14px → 14 × 1.5 × 2 ≈ 42 → 向上取整到 48–56px）
    • textarea 加 max-height: 120px 防止无限拉伸，配合 overflow-y: auto

    保持 vertical-align: top（不是 middle），让滚动条和文字顶部对齐，视觉更稳 别信 line-height 能控制 textarea 行高——它只影响光标和选区，不影响内容容器高度 最容易被忽略的是：没有同步约束

    的 padding 和 textarea 的 border。哪怕只多 1px 的边框或 2px 的内边距，48px 的最小高度就立刻变成 52px 以上——而这个偏差在不同浏览器里还不一致。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！