文字断行不一致的核心原因是字体渲染差异、视口宽度变化、line-height与字号比例失衡及换行控制缺失；需通过overflow-wrap/word-break主动约束、相对line-height、分层媒体查询及可选字体缩放禁用协同解决。
文字在不同设备上断行不一致，核心原因常是字体渲染差异、视口宽度变化、行高（line-height）与字号比例失衡，以及未对换行行为做明确控制。单纯调大 line-height 或依赖默认断行逻辑，容易在小屏挤字、大屏留空，或在 iOS/Android 上表现不一。解决关键在于「主动约束」+「分层响应」。
用 word-break 和 overflow-wrap 明确断行策略
浏览器默认按空格和连字符断行，但中英文混排、长单词（如 URL、技术术语）或无空格文本（如连续数字）极易破坏布局。需显式声明断行规则：
-
word-break: break-word;：旧写法，兼容性好，但部分 Android 浏览器支持不稳定 -
overflow-wrap: break-word;：现代标准，优先在长单词内断行，更可控 -
word-break: break-all;：强制在任意字符间断行（慎用，影响可读性），适合代码块、ID 字段等场景
推荐组合：
text {
overflow-wrap: break-word;
word-break: keep-all; /* 中文不拆字，英文单词仍可整体换行 */
}设置「相对 line-height」而非固定像素值
用 line-height: 1.5（无单位）代替 line-height: 24px。无单位数值是相对于当前 font-size 的倍数，能随字号缩放保持行间距比例稳定。固定像素值在响应式字号变化时会导致行距塌陷或过松。
立即学习“前端免费学习笔记（深入）”；
例如：
- 移动端
font-size: 14px→line-height: 1.5= 21px - 桌面端
font-size: 18px→line-height: 1.5= 27px
视觉节奏一致，且避免因缩放导致行重叠或过大空白。
媒体查询分层控制字号与行高联动
仅调 line-height 不够，必须配合字号调整。不同屏幕密度下，同样字号的可读性不同（如 iPhone Retina 屏文字更锐利，小屏需稍大字号）。建议按视口宽度分三档微调：
p {
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 768px) {
p {
font-size: 15px; / 小屏略减字号防拥挤 /
line-height: 1.55; / 行高微调，维持呼吸感 /
}
}
@media (min-width: 1200px) {
p {
font-size: 17px; / 大屏提升可读性 /
line-height: 1.65; / 稍增行高，避免视觉粘连 /
}
}
注意：媒体查询断点应基于内容而非设备，优先用 em 或 rem 媒体查询（如 @media (max-width: 48em)），更适配用户缩放设置。
补充：禁用系统字体缩放干扰（可选）
部分 Android 或 iOS 设置中，用户开启了「更大字体」或「动态类型」，可能强行放大文本并破坏断行。如产品要求严格一致性，可加：
p {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}但请谨慎——这会降低无障碍体验。仅用于工具类、代码文档等对排版精度要求极高的场景。
基本上就这些。断行问题不是单点修复，而是字号、行高、断行策略、响应断点四者协同的结果。测试时重点看 iPhone 小屏、折叠屏横竖切换、Chrome 模拟器「Fit-in-viewport」模式，比只盯桌面预览更有效。
