卡片内文字行高显挤或空，主因是line-height未用无单位值（如1.5），而误用px或%导致响应式失准；中文正文建议line-height: 1.5，标题1.3–1.4，须按语义类分层设置，避免在容器上统一设而污染子元素。
卡片内文字行高为什么总显得挤或空？
卡片排版中文字“看着不舒服”，八成是 line-height 没设对，而不是字体或字号问题。浏览器对中文的默认行高（line-height: normal）偏小，尤其在小字号（如 14px–16px）卡片标题/描述里，文字上下紧贴，视觉上像粘在一起。
关键点在于：line-height 必须用无单位数值（如 1.6），不能写 20px 或 160%——否则卡片在响应式缩放、用户调整字号、或嵌套不同字体大小的子元素（比如 <strong></strong>）时，行高会失准甚至重叠。
- 中文卡片正文建议从
line-height: 1.5起步，标题可略紧凑（1.3–1.4），避免头重脚轻 - 若卡片用了自定义中文字体（如 Noto Sans CJK），务必检查其 ascender/descender 是否合理；否则
line-height: 1.5可能仍显局促 - 别在卡片容器（如
.card）上统一设line-height，它会污染内部所有文本节点；应按语义分层设置：.card-title、.card-desc单独控制
中文卡片里的 letter-spacing 怎么调不翻车？
加一点字距能让中文卡片更“透气”，但负值（如 -0.3px）极易导致字符粘连，尤其在 Retina 屏或系统字体渲染下——这不是 bug，是汉字笔画密度高+渲染引擎抗锯齿叠加的结果。
实操建议非常具体：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 中文场景只用
0、0.2px或0.5px正向微调；超过0.8px就开始有“断字感” - 如果卡片含中英文混排（如 “价格：¥99”、“标签：Design”），
letter-spacing必须为0，否则英文部分会被拉得松散失衡 - 优先用类名绑定而非内联样式，例如给卡片描述加
class="card-text-tight"，再全局写.card-text-tight { letter-spacing: 0.2px; }，避免后期维护时漏改某处
Flex 卡片布局下，line-height 和 gap 别混用
用 display: flex + flex-wrap: wrap 做卡片流式布局时，很多人误把卡片之间的空白当成“行高”来调——其实那是 gap 或 margin 的事，和 line-height 完全无关。
典型错误：给卡片容器设 line-height: 2em，以为能拉开卡片间距，结果只是把每张卡片内部文字撑高了，卡片本身位置没变，还可能因内容高度不一导致错位。
- 卡片间垂直间距用
gap: 16px（推荐）或margin-bottom: 16px，清晰且可控 -
line-height只管卡片内部文字行间距离，不影响卡片盒模型位置 - 如果卡片高度需固定（如封面图+标题+描述三段式），别靠
line-height去“凑高度”，该用min-height+padding+box-sizing: border-box组合
移动端卡片文字排版最容易忽略的三点
PC 上看着刚好的卡片，在手机上常出现文字截断、行高塌陷、字距突兀等问题，根源不在媒体查询本身，而在基础排版属性没做适配准备。
-
viewport设置必须包含initial-scale=1，否则 iOS Safari 可能强制缩放，让line-height计算失准 - 别用
px写line-height或letter-spacing，移动端字体大小常被系统设置干预；1.5和0.2px是安全的，但20px和-0.5px在某些 Android WebView 下会失效或异常 - 竖排卡片（如侧边标签栏）要用
writing-mode: vertical-rl，此时line-height控制的是“列高”，不是行高；若还按横排逻辑设1.6，文字间距会过密
line-height 的冲动——它不像 color 那样温和，一个没想清楚的继承链，就能让三级子标题文字叠在一起。 
