Chrome/Edge 和 Firefox 以不同方式包装长超链接。为什么?

Chrome/Edge and Firefox wrap long hyperlinks differently. Why?

我注意到 Chrome/Edge 和 Firefox 以不同方式包装长超链接。 Firefox 在斜线 / 字符处打破它们,而 Chrome/Edge 不认为斜线 / 字符是特殊的。

是否有关于此行为的一些描述?即:

div {
  background: silver;
  font-family: 'Courier New';
  font-size: 16px;
  max-width: 18ch; width: min-content;
}

a.bare {
  overflow-wrap: break-word;
}
<div>
  <p>see <a href="..." class="bare">
  http://site.web/section/paaaaaaaaaaaaaaaaaaaaage.html</a></p>
</div>

overflow-wrap: break-word:

火狐:

Chrome 和边缘:

overflow-wrap: initial /* normal */:

火狐:

Chrome 和边缘:

break-word:如果超过线的宽度,则单词被强制拆分和换行。

overflow-wrap属性的取值可以参考this doc的一些解释,我认为Edge/Chrome的结果是正确的

在您的示例中,文本被视为单个单词,因此当将属性值设置为normalinitial 时,不会强制拆分。你可以在正文中加几个空格,你会发现这个。

您要查找的是 line-break 属性。它指定允许哪些字符具有 line-breaks,哪些不允许,但并不精确。总而言之,它给出了某些语言中某些字符的一些特定规则,但没有具体说明您询问的情况。它没有指定任何关于斜杠字符的信息。因此,由于 CSS 标准没有指定什么是正确的,所以这些实现都没有错。

line-break 属性 的默认值为 auto,它执行以下操作:

The UA determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.

还有另一个标准,unicode line breaking algorithm,它更具体,它包括一个小东西,它说斜杠应该在它们之后提供一个换行机会,用于您查询的确切情况。 URL 与它们在网络上一样频繁,能够在斜杠处进行换行是有意义的,因此符合该标准。

根据我能找到的最好的 firefox 源代码,它说它遵循 unicode 标准,但根据您的示例,它似乎不是这样做的,相反,firefox 中的斜线似乎提供了一行破机会摆在面前。也许对 firefox 源代码有更深入了解的人可以解释为什么这样做?

我不确定 chrome 换行算法,因为搜索源代码要困难得多,但我想开发人员决定 '/' 字符不值得换行根据 css 规范中 'auto' 的广义定义,在这些情况下会中断。