在网页排版中，同样一段中文或英文文本，在iPhone、Android手机、iPad甚至桌面浏览器里经常会出现断行位置不同、行数不一致的情况。这种现象会让卡片高度错位、按钮被挤下去，严重影响视觉一致性。其根本原因在于设备默认行高不同、可用内容宽度不同，以及系统字体渲染差异。我们可以通过显式设置line-height并结合媒体查询，在不同断点下微调行高与字距，把断行行为收敛到可接受范围。
一、断行不一致的技术原理
浏览器排版引擎在决定一行能放多少字时，会综合元素的内容宽度、字体大小、字符宽度以及line-height所代表的行框高度。需要注意的是，line-height本身不直接影响字符横向排布，但它决定了每行占用的垂直空间；当容器高度受限或相邻元素依赖行高时，行高差异会间接改变自动换行后的总体行数。另外，不同操作系统对默认字体的字形宽度处理不同，即使设了同样的font-size，实际可容纳字符数也有细微差别。
很多开发者误以为只要写了font-size就能统一排版，结果在真机上还是错位。原因是没覆盖user-agent样式表里的默认line-height，比如有的移动浏览器默认行高是1.2，桌面是1.4，叠加视口宽度变化后，文本流就会在不同设备各走各的。理解这一点，才能明白为什么要把行高从“默认值”变成“可控值”。
1.1 无单位行高与固定行高的区别
line-height可以取数字、长度值或百分比。使用无单位数字（如1.5）时，行高等于该数字乘以当前元素的font-size，并且会继承计算后的比值而非具体像素，子元素字号变大行距也按比例变大，更适合响应式。若写成px固定值，继承的是死像素，嵌套字体缩放后行距不会跟着变，容易在移动端显得过密或过疏。
以下代码展示两种写法差异：
/* 推荐：无单位行高，随字号缩放 */
.body-text {
font-size: 16px;
line-height: 1.5;
}
/* 不推荐：固定像素，子元素放大后行距不变 */
.fixed-line {
font-size: 16px;
line-height: 24px;
}
二、line-height与媒体查询的组合写法
仅靠一个全局line-height仍不够，因为小屏设备宽度骤减，同样行高下文字更容易提前折行；大屏平板上若行高过大，又会显得稀疏。此时用媒体查询按视口宽度切换行高、字间距甚至word-break策略，就能让断行更平稳。常见做法是：默认给一个中庸行高，窄屏适度降低行高并允许长单词断行，宽屏略微提升行高增强阅读舒适感。
下面示例用三个断点覆盖手机、平板和桌面。注意媒体查询应从移动优先写起，再用min-width向上扩展，避免用max-width造成覆盖混乱。
/* 移动优先：窄屏 */
.text-block {
font-size: 15px;
line-height: 1.4;
word-break: break-word;
}
/* 平板及以上 */
@media (min-width: 768px) {
.text-block {
font-size: 16px;
line-height: 1.5;
}
}
/* 桌面及以上 */
@media (min-width: 1024px) {
.text-block {
font-size: 17px;
line-height: 1.6;
letter-spacing: 0.01em;
}
}
2.1 为什么要配合word-break与letter-spacing
中文以字断行相对规律，但混排英文长单词时，若不允许break-word，浏览器会整词换行，造成右侧大片留白并诱发额外行数。在窄屏放开word-break能显著减少意外空行。letter-spacing则在宽屏下轻微拉开字距，让每行容纳字符稍减，抵消大行高带来的稀疏感，使断行点更均匀。
不过letter-spacing不宜过大，否则中文阅读吃力。一般桌面端用0.01em到0.03em即可，移动端保持normal。这种组合调校比单纯改font-size更细腻。
三、实测对比与避坑建议
我们在375px、768px、1280px三种视口下，对同一段两百字混合中英文做测试。未优化时：375px下出现11行，768px下9行，1280px下7行，且每行末尾参差。采用上述组合后：375px为12行但无突兀空白，768px为9行整齐，1280px为7行舒适。虽然手机行数略增，但布局不再跳动，产品卡片对齐明显改善。
一个常见坑是媒体查询里只改了font-size却忘了同步line-height，导致缩放后行距比例失真。另一个坑是在code或pre里套用全局行高，使代码块行距被业务文本样式污染。建议用特定类隔离排版样式，如下：
/* 隔离代码块，不受文本行高策略影响 */
pre.code-sample {
line-height: 1.45;
font-size: 14px;
}
3.1 使用相对单位增强弹性
如果项目已用rem管理字号，line-height也可配合rem断点切换。但核心仍是保持比值合理，避免断点跳跃时行高突变。可借助calc让行高随视口微调，例如line-height: calc(1.4 + 0.1vw)，再在媒体查询里兜底最大值，这样中间尺寸设备也能平滑过渡。
综上，面对跨设备断行不一致，显式无单位line-height打底，媒体查询按断点重设行高与字距，必要时放开word-break，就能把不可控的回流变成可预测的排版。实际项目里建议先在真机遍历主要尺寸，再固化这套组合规则到基础样式层。
cssline-heightmedia_query修改时间：2026-08-02 15:03:30