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

Question

我想要实现的是将文本着色为红色、黄色、绿色蓝色。现在没有红色，如下图所示。文本元素的高度从屏幕顶部到文本底部，容器元素也是如此。为了获得红色显示，我需要让文本达到元素的整个高度，在图片中它将是黑色背景的顶部。我尝试了几种变体，试图用 flex 和 table 来设置它的样式。

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

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  height: 8rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  /* this changes nothing */
  align-self: stretch;
  /* this also changes nothing */
}

#header {
  /* I've tried flex and align stretch etc. here also without success */
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8rem;
  font-weight: 800;
  background: linear-gradient(to bottom, red 0% 25%, yellow 25% 50%, green 50% 75%, blue 75%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<div id="container">
  <div id="header">WORD</div>
</div>

Answer 1

这是由于字体的性质造成的。如果您添加 Â 之类的字符，您将看到红色部分，因此您的文本已经占用了所需的空间。

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  height: 8rem;
  display: flex;
  justify-content: center;
}

#header {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8rem;
  font-weight: 800;
  background: linear-gradient(to bottom, red 0% 25%, yellow 25% 50%, green 50% 75%, blue 75%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<div id="container">
  <div id="header">WORÂÄ</div>
</div>

如果你添加像j 这样的字符，你也会对一些溢出感到惊讶：

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  height: 8rem;
  display: flex;
  justify-content: center;
}

#header {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8rem;
  font-weight: 800;
  background: linear-gradient(to bottom, red 0% 25%, yellow 25% 50%, green 50% 75%, blue 75%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<div id="container">
  <div id="header">WjRÂÄ</div>
</div>

在您的特殊情况下，您可以使用background-size 来获得您想要的颜色，因为您不会有像j 或Â 这样的字符

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
}

#header {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8rem;
  font-weight: 800;
  background: linear-gradient(to bottom, red 0% 25%, yellow 25% 50%, green 50% 75%, blue 75%);
  /* an approxiamtion based on your case, you may need to change it */
  background-size:100% 60%; 
  background-position:0px 54%;
  /**/
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<div id="container">
  <div id="header">WORD</div>
</div>