html - 避免在 Chrome 换行前给尾随空格加下划线

Question

以下代码段在 Firefox 59 中正确呈现(假设)没有尾随空格下划线，但在 Chromium 65 中呈现显式换行符之前行尾的虚假空格:

<div style="width:100px">
  <a href="#">This is long link, <br />with a line break</a>
</div>

Chromium 65 的屏幕截图:

来自 Firefox 59 的屏幕截图:

这种情况的明显解决方法是删除换行符前面的空格，但这是不自然的。

是不是其中一处渲染不对？是 HTML 或 CSS 规范指定的行为还是真的未定义？

编辑 1:在 IE 中也可以观察到与 Firefox 中相同的行为，因此看起来 Chromium 是唯一的。

Answer 1

问题不在于 Chrome 在尾随空格下划线而 Firefox 没有。问题是 Chrome 在换行时没有删除尾随空格(当换行源自硬 <br /> 换行时)。空格带有下划线是因为它就在那里，这与 Chrome 在自动换行文本时处理尾随空格的方式不一致。

关于 handling trailing spaces on wrapped text 的 CSS 规范状态:

4.1.3. Phase II: Trimming and Positioning

As each line is laid out,

1. A sequence of collapsible spaces at the beginning of a line is removed.
2. If the tab size is zero, tabs are not rendered. Otherwise, each tab is rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the tab size from the block’s starting content edge. The tab size is given by the tab-size property.
3. A sequence of collapsible spaces at the end of a line is removed.
4. If spaces or tabs at the end of a line are non-collapsible but have white-space set to pre-wrap the UA must either hang the white space or visually collapse the character advance widths of any overflowing spaces such that they don’t take up space in the line. However, if overflow-wrap is set to break-spaces, collapsing their advance width is not allowed, as this would prevent the preserved spaces from wrapping.

CSS 工作组有 discussed the inconsistent handling of trailing white-space在他们的 github repo 上，特别提到 Firefox 对尾随空格的处理是最理想的:

And lastly there's the point that trailing spaces just look bad, and that having a space just inside the closing tag of an inline or before a <br> is a reasonably common unintentional markup pattern that shouldn't have a bad effect on rendering. The preserved trailing space becomes noticeable both when the inline is styled, as in the example given by @palemieux, and also when we chose text alignments other than start. This gives a real-world use case indicating a preference for Firefox's behavior.

从这个讨论中，前面提到的CSS spec has been updated (在 github 存储库中，但显然尚未发布)以匹配 Firefox (Gecko) 行为。具体将上面的第 1 点和第 3 点更新为:

A sequence of collapsible spaces at the beginning of a line (ignoring any intervening inline box boundaries) is removed.

A sequence of collapsible spaces at the end of a line (ignoring any intervening inline box boundaries) is removed.

强调我添加的更改。