line-clamp只控制显示行数而不限制行长，需配合ch单位、clamp()缩放和媒体查询按em分档来动态控制行长，确保各屏阅读舒适；ch基准字体必须与font-family一致。
为什么line-clamp不能限制行长
line-clamp只控制「最多显示几行」，不干预每行实际宽度。它依赖display: -webkit-box做视觉截断，和容器width或文字流无关。小屏上max-width: 60ch没设，哪怕只显示两行，也可能每行只有10个字，阅读节奏碎；大屏上没约束，一行塞七八十字符，眼跳吃力。
用ch单位 + clamp()动态控制行长
ch是“0”字符的宽度，比em或%更贴近真实字宽，尤其适合中英文混排场景。但直接写max-width: 60ch在手机上会溢出——必须配合根字号缩放：
-
::root { font-size: clamp(1rem, 4vw, 1.25rem); }：最小1rem（建议≥16px），最大1.25rem，中间线性过渡 -
p { max-width: 60ch; margin-inline: auto; }：60ch是舒适阅读上限，窄屏自动收窄 - 别在
max-width里写px或rem，否则视口变化时行长失控
媒体查询按「可用内联尺寸」分档，不是硬切像素
按@media (max-width: 768px)这种写法容易误判：横屏手机、高DPI平板实际可用宽度远超768px，但阅读体验仍是移动端。更稳妥的是按em基准分档：
- 默认（移动端优先）：
max-width: 50ch—— 防止小屏换行过碎 -
@media (min-width: 48em)：max-width: 65ch—— 对应中屏设备（如折叠屏展开、小平板） -
@media (min-width: 64em)：max-width: 75ch—— 大屏封顶，再宽也不加
所有ch值必须在真机上用长段落测试，尤其注意「W」和「一」宽度差异带来的视觉行长偏移。
line-height必须用无单位值，且要适配字号缩放
line-height: 1.5随font-size等比缩放；line-height: 24px或line-height: 1.5em会锁死或累积，导致小屏行距空洞、大屏文字粘连。
- 正文统一用
line-height: 1.6（中文稍高更清晰） - 若
font-size小于1rem，可单独加@media (max-width: 320px)微调为line-height: 1.7 - 嵌套文本（如
p > span）里子元素重设font-size时，父级line-height不会重算——此时必须用纯数字，别用normal
最容易被忽略的是：ch单位的基准字体必须和页面font-family一致。思源黑体下的60ch和苹方下的60ch，物理宽度能差2厘米以上——测行长前，先确认字体已加载并生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
