避免在 Chrome 换行前给尾部 space 添加下划线
Avoid underlining the trailing space before line wrap in Chrome
以下代码段正确呈现（假设）没有尾随 space 在 Firefox 59 中加下划线，但在 Chromium 65 中呈现显式换行符之前行尾的虚假 space：
<div style="width:100px">
<a href="#">This is long link, <br />with a line break</a>
</div>
来自 Chromium 65 的屏幕截图：
来自 Firefox 59 的屏幕截图：
这种情况的明显解决方法是删除换行符前面的 space，但它不自然。
是不是其中一处渲染不对？ HTML 或 CSS 规范指定的行为之一，还是这真的未定义？
编辑 1：在 IE 中也可以观察到与 Firefox 中相同的行为，因此看起来 Chromium 是唯一的。
如果我们检查 specification 我们可以读到：
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped.
问题不在于 Chrome 在尾部 space 下划线，而 Firefox 则没有。问题是 Chrome 在换行时没有删除尾随的 space （当换行源自硬 <br /> 换行时）。 space 带有下划线是因为它在那里，这与自动换行文本时 Chrome 处理尾随 space 的方式不一致。
关于 handling trailing spaces on wrapped text 的 CSS 规范指出：
4.1.3. Phase II: Trimming and Positioning
As each line is laid out,
- A sequence of collapsible spaces at the beginning of a line is removed.
- 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.
- A sequence of collapsible spaces at the end of a line is removed.
- 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 工作组在他们的 github 回购中有 discussed the inconsistent handling of trailing white-space，特别提到 Firefox 对尾随白色的处理space 是最理想的：
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.
强调我添加的更改。
以下代码段正确呈现（假设）没有尾随 space 在 Firefox 59 中加下划线，但在 Chromium 65 中呈现显式换行符之前行尾的虚假 space：
<div style="width:100px">
<a href="#">This is long link, <br />with a line break</a>
</div>
来自 Chromium 65 的屏幕截图：
来自 Firefox 59 的屏幕截图：
这种情况的明显解决方法是删除换行符前面的 space，但它不自然。
是不是其中一处渲染不对？ HTML 或 CSS 规范指定的行为之一，还是这真的未定义？
编辑 1：在 IE 中也可以观察到与 Firefox 中相同的行为，因此看起来 Chromium 是唯一的。
如果我们检查 specification 我们可以读到：
Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped.
问题不在于 Chrome 在尾部 space 下划线，而 Firefox 则没有。问题是 Chrome 在换行时没有删除尾随的 space （当换行源自硬 <br /> 换行时）。 space 带有下划线是因为它在那里，这与自动换行文本时 Chrome 处理尾随 space 的方式不一致。
关于 handling trailing spaces on wrapped text 的 CSS 规范指出：
4.1.3. Phase II: Trimming and Positioning
As each line is laid out,
- A sequence of collapsible spaces at the beginning of a line is removed.
- 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.
- A sequence of collapsible spaces at the end of a line is removed.
- 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 工作组在他们的 github 回购中有 discussed the inconsistent handling of trailing white-space，特别提到 Firefox 对尾随白色的处理space 是最理想的：
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.
强调我添加的更改。