html - 如何 'hide' :first-line for white-space:pre-line in FIREFOX browser

Question

当我使用

white-space: pre-line;
word-break: break-word;

...文本前多了一行。为了隐藏它，我使用了:

.class:first-line { line-height: 0; }

...它可以在 Chrome 浏览器中运行，但不能在 Firefox 中运行。

这是一个可用的 fiddle ，请在 Firefox 中打开它:https://jsfiddle.net/t3qj51co/2/

Answer 1

为什么不修复你的 HTML ( demo )

问题是在您的 html 中有一个空行。由于您使用 pre-line，它也会考虑到这一点。

只需删除空行即可解决问题。

---

问题是 firefox 不允许将 line-height 降低到当前事件的高度以上。

起初这看起来像一个 Firefox 错误(它按照 Chrome、IE、Safari 中的 OP 中的描述工作)。
但是阅读 specification我看到它是可以解释的，因为它说的是

This paragraph might be "rewritten" by user agents to include the fictional tag sequence for ::first-line. This fictional tag sequence helps to show how properties are inherited.

如果 UA 遵循此方法，则不降低行的视觉高度是有效的，因为它仅适用于“虚构标签”。 (嵌套标签不能向下影响其容器的行高)

因此不确定这是一个实际错误(在任一浏览器范围内)还是实现中的有效差异。