如何让含连字符的长 URL 在 HTML 中任意位置断行-html教程-PHP中文网

如何让含连字符的长 URL 在 HTML 中任意位置断行

通过 CSS 的 line-break: anywhere 属性，可强制浏览器在长 URL 的任意字符间（包括连字符前后）安全换行，避免仅在连字符处断裂，同时保持链接可复制粘贴的完整性。

通过 css 的 `line-break: anywhere` 属性，可强制浏览器在长 url 的任意字符间（包括连字符前后）安全换行，避免仅在连字符处断裂，同时保持链接可复制粘贴的完整性。

在响应式网页或窄容器中显示长 URL 时，浏览器默认倾向于在连字符（-）、斜杠（/）或句点（.）等标点处断行——这虽符合排版惯例，却常导致 URL 断裂不均、行末留白过大，甚至出现单个短段落悬挂在下一行的尴尬情况。尤其当 URL 中包含多个连字符（如 wp-content/uploads/2015/01/file-name.pdf），传统方案如 overflow-wrap: break-word 或 word-break: break-all 往往失效或破坏语义。

此时，现代 CSS 提供了更精准的解决方案：line-break: anywhere。该属性明确指示浏览器可在任何字符之间（包括 ASCII 连字符、下划线、数字与字母交界等）进行换行，且不插入连字符（hyphens: none 仍需保留以禁用自动连字），完美兼顾可读性与功能性。

✅ 推荐样式写法如下：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

ol, li {
  text-align: justify;
}
a {
  overflow-wrap: break-word;  /* 兼容旧浏览器，作为兜底 */
  word-break: break-word;      /* 针对部分旧版 Safari/Chrome 补充支持 */
  line-break: anywhere;        /* 关键：允许在任意字符间断行 */
  hyphens: none;               /* 禁用自动连字，避免冗余符号 */
}

⚠️ 注意事项：

line-break: anywhere 已被 Chrome 63+、Firefox 69+、Safari 15.4+ 及 Edge 79+ 原生支持；若需兼容 IE 或极老版本，建议配合 word-break: break-all（但会牺牲部分可读性）；
切勿使用（软连字符）或 ‑（不可见连字符）——它们虽能控制断点，但会污染剪贴板内容，导致用户粘贴后 URL 失效；
对于 <a></a> 标签，确保未设置 white-space: nowrap 等阻止换行的属性；
若 URL 包裹在 <code> 或 <pre class="brush:php;toolbar:false;"></pre> 中，需额外重置 white-space（如设为 normal）才能生效。