当然可以用CSS搞定这个问题！我之前做电商项目时也碰到过iOS Safari这种奇葩的换行逻辑——它默认会把现成的连字符当成换行断点，导致文本被拆得乱七八糟。好在我们完全可以通过CSS控制换行规则来修复。

核心解决方案 #

给包含尺寸文本的元素添加以下CSS规则：

.size-text {
  /* 针对iOS Safari的私有属性，禁用连字符处的换行 */
  -webkit-hyphens: none;
  /* 标准属性，兼容其他现代浏览器 */
  hyphens: none;
  /* 可选：如果希望整个尺寸文本始终作为一个整体不换行（避免容器过窄时拆分） */
  white-space: nowrap;
}

原理说明 #

• -webkit-hyphens: none：专门针对iOS的webkit内核浏览器（比如Safari），强制禁止浏览器在连字符位置自动换行，不管这个连字符是自动生成的还是服务器返回的。
• hyphens: none：W3C标准属性，作用和上面的私有属性一致，用来兼容Chrome、Firefox等其他现代浏览器。
• white-space: nowrap：如果你的布局允许尺寸文本不换行，加上这个属性可以彻底杜绝任何情况下的文本拆分，确保“2-3YR”“4-5YR”这类尺寸始终显示为一个完整单元。如果容器宽度有限，文本会溢出容器（你可以配合overflow: hidden或text-overflow: ellipsis来处理溢出情况）。

灵活调整方案 #

如果你的布局需要文本在必要时换行，但只是不想在连字符处拆分，可以去掉white-space: nowrap，只保留hyphens: none规则。这样文本会在单词间隙或容器边界换行，但不会在连字符位置拆分。

举个实际的HTML使用例子：

<span class="size-text">2-3YR</span>
<span class="size-text">4-5YR</span>

应用CSS后，iOS设备上的尺寸文本就会和其他设备显示一致，不会再出现连字符后换行的问题啦。

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