显示：行高的内联问题：浏览器尺寸较小时行之间的间距太大

Question

我有 2 个“跨度”文本块，我想使用 display: inline 将其“合并在一起”。但是，我希望无论浏览器大小如何，行高都保持一致。对于字体大小，我使用“vw”单位，因为我希望它根据浏览器宽度进行缩放。

https://jsfiddle.net/darrengates/jpLaf683/

当以大尺寸（例如1200px）查看时，文本看起来不错，即：

this is the first block this is the first block this is the first block
this is the first block this is the first block this is the first block
this is the first block this is the first block this is the first block
this is the first block this is the second block... (etc.)

然而，当浏览器的尺寸调整到非常小的尺寸（例如500px）时，行之间的间距开始看起来非常大。事实上，行与行之间似乎有一整行空间，例如：

this is the first block this is the first block this is the first block

this is the first block this is the first block this is the first block

this is the first block this is the first block this is the first block

this is the first block this is the second block... (etc.)

我想要它做的是将字体缩小到非常小的尺寸，但保持行间距，以便无论浏览器大小如何，它看起来都是一致的。假设我无法更改 HTML 本身，而必须仅使用 CSS 来执行此操作。还假设我必须使用 VW 单位作为字体大小。

Answer 1

看来使用

line-height: 0 

在父容器中允许我在子内联容器中设置单独的行高值。这是一个在所有屏幕尺寸上都适合我的示例：

https://jsfiddle.net/darrengates/L85xke8b/