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的结果是正确的
在您的示例中,文本被视为单个单词,因此当将属性值设置为normal
或initial
时,不会强制拆分。你可以在正文中加几个空格,你会发现这个。
您要查找的是 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' 的广义定义,在这些情况下会中断。
我注意到 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的结果是正确的
在您的示例中,文本被视为单个单词,因此当将属性值设置为normal
或initial
时,不会强制拆分。你可以在正文中加几个空格,你会发现这个。
您要查找的是 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' 的广义定义,在这些情况下会中断。