Html 如何使文本适合容器元素的完整高度

我试图实现的是将文本染成红色、黄色、绿色和蓝色。现在没有红色，如下图所示。文本元素的高度从屏幕顶部到文本底部，容器元素也是如此。为了得到红色显示，我需要得到文本元素的完整高度，在图片中是黑色背景的顶部。我尝试了几种变体，试图将其与flex和table结合起来

如果我删除容器元素的高度，它会使文本垂直居中，但如图所示，它仍然不是全高，无法显示更多颜色的顶部和底部。有什么想法吗

@导入url（'https://fonts.googleapis.com/css2?family=Orbitron:wght@400；800&display=swap'）；
身体{
背景色：黑色；
保证金：0；
填充：0；
框大小：边框框；
}
#容器{
高度：8雷姆；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：拉伸；
/*这不会改变什么*/
自我调整：伸展；
/*这也改变不了什么*/
}
#标题{
/*我在这里尝试了flex和align stretch等，但也没有成功*/
文本对齐：居中；
字体系列：“Orbitron”，无衬线；
字号：8rem；
字号：800；
背景：线性梯度（至底部，红色0%25%，黄色25%50%，绿色50%75%，蓝色75%）；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
}

单词

这是由于字体的性质。如果您添加类似

的字符

，您将看到红色部分，因此您的文本已经占用了所需的空间

@导入url（'https://fonts.googleapis.com/css2?family=Orbitron:wght@400；800&display=swap'）；
身体{
背景色：黑色；
保证金：0；
填充：0；
框大小：边框框；
}
#容器{
高度：8雷姆；
显示器：flex；
证明内容：中心；
}
#标题{
文本对齐：居中；
字体系列：“Orbitron”，无衬线；
字号：8rem；
字号：800；
背景：线性梯度（至底部，红色0%25%，黄色25%50%，绿色50%75%，蓝色75%）；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
}

沃什

这是由于字体的性质。如果您添加类似

的字符

，您将看到红色部分，因此您的文本已经占用了所需的空间

@导入url（'https://fonts.googleapis.com/css2?family=Orbitron:wght@400；800&display=swap'）；
身体{
背景色：黑色；
保证金：0；
填充：0；
框大小：边框框；
}
#容器{
高度：8雷姆；
显示器：flex；
证明内容：中心；
}
#标题{
文本对齐：居中；
字体系列：“Orbitron”，无衬线；
字号：8rem；
字号：800；
背景：线性梯度（至底部，红色0%25%，黄色25%50%，绿色50%75%，蓝色75%）；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
}

沃什

您是否尝试过调整

line height

属性？在本例中，我将

line height

设置为1，但我无法判断字体是否与此相似。我没有试过，但我只是试过，而且

行高

不会改变文本的高度，它只是改变了它的位置。因此，将

行高

设置为1，将

字体大小

设置为

7rem

显示了文本的完整性，但它与容器的大小不同。行高一般比字体大20%左右。你能做的就是把这个高度倒回去。如果希望字体高度等于元素的大小，可以将其值增加20%。通过使用一些数字进行调整，您可以得到以下结果：因此，最好改为调整背景位置。您是否尝试过调整

行高

属性？在本例中，我将

行高

设置为1，但我无法判断字体是否与此相似。我没有试过，但我只是试过，而且

行高

不会改变文本的高度，它只是改变了它的位置。因此，将

行高

设置为1，将

字体大小

设置为

7rem

显示了文本的完整性，但它与容器的大小不同。行高一般比字体大20%左右。你能做的就是把这个高度倒回去。如果希望字体高度等于元素的大小，可以将其值增加20%。通过调整一些数字，你可以得到这样的结果：所以最好是调整背景位置。因为这两个例子都删去了底部的文字，我想这不是他的本意。@Simplicius嗯，如果我在第一个例子中没有做任何更改，怎么能删去文字呢？同样在第二个示例中（只更改了后台属性），那么，运行代码段。但对于您来说，第一个代码段中的文本由于特殊的字母“the”和“Ä”而被向下推，在第二个代码段中，再次运行代码，容器的大小是肉质的，因为文本被定义为背景图像，所以它也会结束。@Simplicius字母不能推送文本，字体度量定义了文本的位置/大小，以及您使用的字母。。不知道你看到了什么。。第一个片段给出的结果与问题中的片段完全相同，因为没有CSSchanged@TemaniAfif谢谢你看。你的第三个片段接近我想要实现的目标。但是，颜色不是文本高度的25%，它们很接近，但有一点偏离。我试图搞乱背景尺寸和位置百分比，但只能接近。如果我能让文本填充元素，那么所有的颜色都将是文本高度的25%。因为这两个例子都是在底部剪切文本，我想这不是他的本意。@Simplicius嗯，如果我在f中没有做任何更改，文本怎么能被剪切呢