长 URL 的更好换行

CSS-Tricks 之前已经介绍过如何 断开超出其容器的文本，但没有您想象的那么多。早在 2012 年，Chris 就撰写了 “处理长单词和 URL（强制断行、连字符、省略号等）”，它仍然是关于此主题的少数几篇文章之一，包括他在 2018 年的后续文章 “换行的位置很复杂。 以下是所有相关的 CSS 和 HTML。”

Chris 的久经考验的技术在您希望利用浏览器中内置的自动断词和连字符规则时效果很好。

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

但是，如果您无法做到呢？如果您的样式指南要求您在某些位置断开 URL 呢？这些经典的重锤对于这种程度的控制来说太不精确了。我们需要一种不同的方法来告诉浏览器确切的断行位置。

为什么我们需要关心 URL 中的换行

一个原因是设计。超出其容器的 URL 看起来很糟糕。

然后是文案标准。例如，芝加哥写作手册规定了何时换行打印的 URL。再说一次，芝加哥手册允许我们对电子文档进行处理……有点像这样

通常不需要为具有可回流文本的电子出版物格式中的 URL 指定换行符，并且作者应避免在其手稿中强制换行。

芝加哥手册第 17 版，14.18

但是，如果，就像 Rachel Andrew（2015）鼓励我们的那样，您正在 为印刷品设计，而不仅仅是屏幕呢？突然间，“通常不需要”变成了“绝对必要”。无论您是出版书籍，还是想要创建您用 HTML 编写的研究论文的 PDF 版本，或者您正在设计在线简历，或者您在博文末尾有一个参考文献列表，或者您只是关心 URL 在您的项目中的外观——您都需要一种方法来以更大程度的控制来管理换行符。

好的，因此我们已经确定了为什么考虑 URL 中的换行符是一件事，以及在某些用例中它们实际上非常重要。但这导致了另一个关键问题……

那么，换行符应该放在哪里呢？

我们希望 URL 可读。我们也不希望它们难看，至少不要比必要时更难看。继续遵循芝加哥手册的建议，我们应该根据标点符号断开长 URL，以帮助向读者表明 URL 在下一行继续。这将包括以下任何位置

• 在冒号或双斜杠 (//) 之后
• 在单斜杠 (/)、波浪号 (~)、句点、逗号、连字符、下划线 (也称为下划线，_)、问号、数字符号或百分号之前
• 在等号或与号 (&) 之前或之后

同时，我们不想插入新的标点符号，例如当我们可能在 CSS 中使用hyphens: auto;规则来分解长单词时。软连字符或“shy”连字符非常适合断词，但对 URL 来说是个坏消息。在屏幕上，这并不是什么大问题，例如，软连字符不会干扰复制粘贴。但是用户仍然可能将软连字符误认为是 URL 的一部分——毕竟，连字符通常出现在 URL 中。因此，我们绝对不希望打印版中出现实际上不属于 URL 的连字符。阅读长 URL 已经够难了，我们不应该在 URL 内部断词。

我们仍然可以断开 URL 内特别长的单词和字符串。只是不要使用连字符。在大多数情况下，芝加哥手册将 URL 内部的断词留给自行决定。我们的主要目标是在适当的标点符号之前和之后断开 URL。

如何控制换行符？

幸运的是，有一个（未被充分重视的）HTML 元素用于此特定目的：<wbr> 元素，它表示换行机会。这是一种告诉浏览器的方法，“如果您需要，请在此处换行，而不仅仅是任何地方。”

我们可以采用一个复杂的 URL，例如 Chris 在 2012 年的文章中首次分享的那个 URL

http://www.amazon.com/s/ref=sr_nr_i_o?rh=k%3Ashark+vacuum%2Ci%3Agarden&keywords=shark+vacuum&ie=UTF8&qid=1327784979

并在其中添加一些<wbr>标签，“芝加哥风格”

http:<wbr>//<wbr>www<wbr>.<wbr>amazon<wbr>.com<wbr>/<wbr>s/<wbr>ref<wbr>=<wbr>sr<wbr>_<wbr>nr<wbr>_<wbr>i<wbr>_o<wbr>?rh<wbr>=<wbr>k<wbr>%3Ashark<wbr>+vacuum<wbr>%2Ci<wbr>%3Agarden<wbr>&<wbr>keywords<wbr>=<wbr>shark+vacuum<wbr>&ie<wbr>=<wbr>UTF8<wbr>&<wbr>qid<wbr>=<wbr>1327784979

即使您是有史以来最虐待狂的排版师，您也可能在开始思考是否有办法自动化这些换行机会之前，完全不会标记这样的 URL。

是的，有。请使用 JavaScript 和一些恰当放置的正则表达式

/**
 * Insert line break opportunities into a URL
 */
function formatUrl(url) {
  // Split the URL into an array to distinguish double slashes from single slashes
  var doubleSlash = url.split('//')

  // Format the strings on either side of double slashes separately
  var formatted = doubleSlash.map(str =>
    // Insert a word break opportunity after a colon
    str.replace(/(?<after>:)/giu, '$1<wbr>')
      // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol
      .replace(/(?<before>[/~.,\-_?#%])/giu, '<wbr>$1')
      // Before and after an equals sign or ampersand
      .replace(/(?<beforeAndAfter>[=&])/giu, '<wbr>$1<wbr>')
    // Reconnect the strings with word break opportunities after double slashes
    ).join('//<wbr>')

  return formatted
}

试试看

继续并在新窗口中打开以下演示，然后尝试调整浏览器大小以查看长 URL 如何换行。

这正是我们想要的

• URL 在适当的位置断开。
• 没有可能被误认为是 URL 一部分的其他标点符号。
• <wbr>标签是自动生成的，以使我们免于在标记中手动插入它们。

如果您正在使用静态站点生成器，则此 JavaScript 解决方案效果更好。这样，您就不必仅为了格式化 URL 而在客户端运行脚本。我在我的 使用 Eleventy 构建的个人网站上有一个可运行的示例。

如果您确实也希望断开 URL 内的长单词，那么我建议手动插入那几个<wbr>标签。芝加哥写作手册有一整节专门介绍分词（7.36–47，需要登录）。

浏览器支持

<wbr>元素自 2001 年以来就已出现在实际应用中。它最终在 HTML5 中得到了标准化，因此目前在 几乎所有浏览器中都能正常工作。奇怪的是，<wbr>在 Internet Explorer (IE) 6 和 7 中有效，但在 IE 8 及更高版本中被删除了。Edge 中一直存在支持，因此这只是处理 IE 或其他旧版浏览器的问题。一些流行的 HTML 到 PDF 程序，如 Prince，也需要增强才能处理<wbr>。

另一种可能的解决方案

还有一个技巧可以优化换行机会。我们可以使用伪元素插入 零宽空格，无论如何，这就是<wbr>元素在 UTF-8 编码页面中的行为方式。这至少会将支持追溯到 IE 9，并且可能更重要的是，与 Prince 一起使用。

/** 
 * IE 8–11 and Prince don’t recognize the `wbr` element,
 * but a pseudo-element can achieve the same effect with IE 9+ and Prince.
 */
wbr:before {
  /* Unicode zero width space */
  content: "\200B";
  white-space: normal;
}

---

努力追求印刷质量的 HTML、CSS 和 JavaScript 并不是什么新鲜事，但它正在经历某种程度的复兴。即使您不为印刷品设计或不遵循芝加哥风格，将 URL 和换行符考虑在内来编写您的 HTML 和 CSS 仍然是一个值得追求的目标。

参考文献