窄屏文字换行不美观的核心在于行高与断行策略失配，需协同优化 overflow-wrap、word-break、line-height、hyphens 和 white-space。优先用 overflow-wrap: break-word 应对长英文/数字串，搭配 word-break: keep-all 保中文不断字；line-height 推荐无单位值 1.4–1.6；hyphens: auto 提升英文可读性；真机验证关键内容与浏览器兼容性。
窄屏下文字换行不美观，核心问题常出在行高（line-height）与断行策略不匹配——行高过大导致行间距松散、单字断行或长单词撑破容器。解决关键不是单纯调小 line-height，而是结合断行控制、字体度量和语义断点协同优化。
优先启用智能断行：word-break 与 overflow-wrap
默认情况下，中文可自然在字间断行，但英文、数字串或带连字符的词（如 email、URL）容易溢出。建议按优先级设置：
- overflow-wrap: break-word：允许长单词在必要时在任意位置断开（含中间），适合内容不可控的场景（如用户输入、日志）
- word-break: break-word（旧写法，兼容性好）或更现代的 word-break: break-all：强制在字符级断行，适合纯技术文本，但会破坏可读性，慎用
- 对中英文混排，推荐组合：
overflow-wrap: break-word; word-break: keep-all;—— 保留中文不断字，仅对超长英文/数字串柔性折行
合理设置 line-height：避免“视觉空洞”与重叠
窄屏下过大的 line-height（如 2 或 2.5）会让每行文字孤立，像漂浮在空白中；过小（如 1.1）又可能让上下行文字贴太近，尤其在字体有较大上升/下降部时。建议：
- 正文使用无单位数值（如
line-height: 1.5），它基于当前 font-size 计算，响应式更稳定 - 移动端起步值推荐 1.4–1.6，配合 16px–18px 字号较协调；若字体偏矮胖（如 PingFang SC），可略降至 1.4；若偏修长（如 Noto Sans CJK），可升至 1.55
- 避免用 px/em 固定行高，否则在字号缩放或不同设备渲染下易失衡
补充语义化断行控制：hyphens 与 white-space
对需要更高可读性的正文（如文章、说明文案），可启用浏览器原生连字符支持：
立即学习“前端免费学习笔记（深入）”；
-
hyphens: auto;+ 指定语言（lang="zh"或lang="en"）能实现符合语法规则的断词（中文不生效，英文效果明显） - 禁用意外空白截断：
white-space: normal;（确保默认行为），避免误设nowrap或pre - 对标题或按钮等短文本，可用
white-space: nowrap;配合text-overflow: ellipsis;控制溢出，比强行换行更干净
验证与微调：用真实内容测试断点
模拟窄屏不能只靠开发者工具缩放，需关注实际易出问题的内容：
- 含长 URL、邮箱、版本号（如
v2.14.3-alpha）、英文专有名词的段落 - 两端对齐（
text-align: justify）文本，在窄屏下易产生过大词间距，建议窄屏改用左对齐 - 在真机 Safari / Chrome 中检查——iOS 对
hyphens支持需-webkit-前缀，Android WebView 断行行为也有差异
