
长型号、网址或连续英文可能没有自然换行点,导致手机内容溢出。应按内容类型选择断行策略,并检查容器的最小宽度,不能简单对全站所有文字强制逐字切断,破坏名称和参数阅读。
找出真正撑宽的元素
在窄视口中查看是哪段文字、表格、代码还是布局容器造成横向滚动。Flex或Grid子项的最小宽度也可能阻止收缩,单改文字属性未必解决。记录具体选择器与示例字符串,避免将页面整体缩小或隐藏溢出来掩盖内容缺失。
根据语义选择断行行为
网址和普通长词需要在必要时避免溢出,代码与型号则可能需要保留字符连续性供复制。overflow-wrap和word-break作用不同,具体取值按当前浏览器支持核对。不要把break-all无差别应用到全部正文,造成英语单词与单位随意割裂。

为特殊数据安排独立呈现
极长型号、下载地址或代码可使用专用区域、复制按钮或适当横向滚动,旁边提供清楚名称。必须展示完整值时,不应只用省略号永久隐藏后半段。若视觉换行会引入误读,检查复制结果仍保持原字符,不多出空格或换行。
用真实混排和放大检查
测试中文、英文、数字、小数点、连字符和较长客户资料,涵盖手机横竖屏及浏览器放大。检查断行没有把金额、型号和单位混淆,链接仍容易点击。最终修复范围应只覆盖需要处理的组件,不让全站表格与菜单产生新的断裂。
关键区别

overflow-wrap:必要时提供断行机会;不等于随意逐字切断。
word-break:控制词内部断行;全站使用需谨慎。
复制内容:保持原始完整值;视觉换行不应改数据。
怎样确认处理到位
目标长字符串不再撑破页面,完整值可获取并正确复制,正文和型号阅读自然,其他组件没有被全局规则误伤。
容易误判的边界
隐藏横向滚动并不能证明内容已修好;若溢出来自容器、图片或表格宽度,应处理对应布局原因。
