移动端长单词溢出？检查 hyphens 属性的 manual 值
当移动端页面出现长单词导致布局溢出时，应检查 CSS 的 hyphens 属性是否设置为 manual。
检查 hyphens 属性是否设置为 manual
长单词在移动端屏幕上容易超出容器宽度，导致布局错乱。CSS 的 hyphens 属性控制单词在换行时是否显示连字符。该属性有三个值：none、manual 和 auto。manual 值表示只在文本中手动指定的位置断行。如果未设置该属性或设置为 none，浏览器将忽略单词内部的断点，仅在空白处换行。
检查时需确认元素上是否显式设置了 hyphens: manual。如果该属性未定义，浏览器会使用默认值 manual。但若代码中显式写了 hyphens: none，则单词将无法在内部断开。此时应将属性值改为 manual，以便在指定的软连字符处进行断行。确保该属性继承自父元素或直接应用于目标元素。
确认软连字符 ­ 的使用位置
manual 模式下，断行仅发生在手动指定的位置。这些位置由 Unicode 字符 U+00AD（软连字符）标记。在 HTML 中，应使用实体名称 ­ 来插入该字符。软连字符在视觉上是不可见的，但浏览器会将其视为潜在的断行点。如果文本中没有包含该字符，即使设置了 manual 值，也不会出现断行。
在文本中需要断行的位置插入 ­。例如，将长单词拆分为两个部分并在中间插入该字符。浏览器在渲染时会根据屏幕宽度决定是否在此处断行。如果屏幕宽度允许，单词将在此处断开并显示连字符。如果屏幕过窄无法断开，软连字符将保持不可见。
验证断行效果与浏览器兼容性
设置好属性和字符后，需验证断行效果。在移动端浏览器中查看页面，观察长单词是否在指定位置断开。如果单词仍然溢出，检查是否正确插入了 ­ 字符。同时确认 lang 属性已设置，因为自动断行规则依赖于语言属性。对于 manual 模式，语言属性主要用于确定连字符的样式。
MDN 文档显示，hyphens 属性在 2023 年 9 月起在广泛设备上可用。不同浏览器对 manual 值的支持程度可能略有差异。如果发现断行未生效，可尝试在 CSS 中添加前缀或检查浏览器的兼容性列表。确保文本内容符合 HTML 规范，且软连字符未被其他样式覆盖。
排查其他可能影响断行的 CSS 属性
除了 hyphens 属性，其他 CSS 属性也会影响单词断行。例如，text-wrap-mode: nowrap 会禁止换行，导致断行失效。word-break: break-all 会强制在任意字符处断行，但不会显示连字符。如果设置了这些属性，需将其移除或调整，以确保 hyphens 属性正常工作。
检查容器的宽度设置。如果容器宽度过小，即使设置了 manual 和软连字符，单词也可能无法断开。此时应调整容器宽度或增加文本中的软连字符数量。确保没有其他样式规则覆盖了 hyphens 属性的继承或计算值。通过逐步排查，可以定位导致断行失败的具体原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。