Question

我有2＆＃34; span＆＃34;文本块，我想＆＃34;合并在一起＆＃34;使用display：inline。但是，无论浏览器大小如何，我都希望行高一致。对于字体大小，我使用＆＃34; vw＆＃34;单位，因为我希望它根据浏览器宽度进行缩放。

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。还假设我必须使用大众单位作为字体大小。

Answer 1

似乎正在使用

line-height: 0

父容器中的

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

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

显示：行高的内联问题：浏览器维度较小的行间距过大

1 个答案: