html – 避免在Chrome中换行前强调尾随空格

概述下面的片段正确呈现(假设)没有在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的屏幕截图： 下面的片段正确呈现(假设)没有在firefox 59中带下划线的尾随空格,但在Chromium 65中,渲染显式换行符之前的行尾的虚假空间：

<div >  <a href="#">This is long link,<br />with a line break</a></div>

Chromium 65的屏幕截图：

firefox 59的屏幕截图：

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

是不是渲染错了？是HTML或CSS规范指定的行为之一,还是这个确实未定义？

编辑1：在IE中也可以观察到与firefox相同的行为,因此看起来Chromium是唯一的一个.

解决方法 问题不在于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,

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 repo上有discussed the inconsistent handling of trailing white-space,特别提到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 repo中,但尚未明显发布)与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.

强调我添加的变化.

总结

以上是内存溢出为你收集整理的html – 避免在Chrome中换行前强调尾随空格全部内容，希望文章能够帮你解决html – 避免在Chrome中换行前强调尾随空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。