Safari浏览器text rendering文字渲染异常导致文本换行如何修复

这一问题是Safari与Chromium内核的字体渲染、尺寸计算逻辑差异导致的，可通过以下方案逐一排查修复：

• 若需求为单行显示，直接给标签添加 white-space: nowrap; 强制禁止文字换行，是最高优先级的兜底方案
• 统一不同浏览器的字体渲染规则，给标签添加以下CSS属性：

-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
-webkit-text-size-adjust: 100%;

其中 -webkit-text-size-adjust: 100% 可禁止Safari自动放大小于12px的字号，避免自动放大后宽度超出容器触发换行

• 显式指定标签的行高，不要使用浏览器默认值，例如添加 line-height: 1.2 或和高度匹配的固定像素值，避免行高计算差异间接挤压宽度
• 给标签预留1-2px的宽度冗余，或在flex布局中添加 flex-shrink: 0; 禁止标签被父容器挤压，规避Safari宽度四舍五入后比Chromium多1px的问题
• 检查根元素font-size配置，避免rem换算后出现小数像素的字号，优先保证最终计算的字号为整数像素

内容的提问来源于stack exchange，提问作者Pinnokkio