用 1lh 与 1em 匹配文本骨架屏行高

是什么 这条推文展示一种针对文本骨架屏的 CSS 尺寸配对：外层设为 1lh，内层 Skeleton 设为 1em。1lh 代表当前元素的行盒高度，1em 则跟随当前字号，更接近文字的视觉填充高度。演示用 text-sm、不同 leading 以及 text-lg 对比加载态与 lorem ipsum 实际文本。

核心设计 普通骨架条若直接撑满 line-height，会把 leading 也画成灰色，尤其在 leading-loose 或 leading-8 下明显比文字高。外层保留完整行盒，保证占位空间与真实文本一致；内层只覆盖字形尺度，加载态因此既不引发布局跳动，也不显得臃肿。使用时把组件放回原文本位置并设置宽度即可，适合封装进 shadcn/ui Skeleton 或 Tailwind CSS 的文本占位样式。

关键洞察 这不是简单调小高度，而是把布局高度与视觉填充分成两层，分别对应 line box 与 glyph box。CSS 相对单位让字号、行高和骨架视觉之间的关系自动联动，减少为每种文本样式写死尺寸。

边界与风险 lh 单位、继承的 line-height、字体替换和多行文本仍需在目标浏览器与实际字体下验证。多行、截断、动态宽度还要单独处理；该技巧主要优化单行文本占位，不能自动解决复杂段落骨架或真实内容高度差异。