CSS-动态删除字体下降器

我正在使用

react textfit

自动缩放文本，以适应特定宽度和高度（占窗口的百分比）的

div

。我使用的字体有一个巨大的降格（底部空白）。因此，尝试将与此文本内联的其他元素居中是很困难的。由于此文本的大小将根据屏幕大小而更改，因此我无法手动更改行高度来解决此问题。此外，使用可变行高也不起作用，因为字体没有围绕文本居中

例如，在此图像中，您可以看到角色下方有大量空白

可变行高（70%）也没有帮助，因为底部的空白被视为字符本身的一部分。因此，字符在

div

中没有垂直居中，这是预期的结果。用像素值手动设置线条高度也会以同样的方式失败

因为字符下面有空格，所以应该垂直居中于文本旁边的内联元素会下移

标题与包含的内联元素一起包装在以下

div

中：

.title {
  width: 100%;

  margin-left: 4vw;

  height: 20vmin;
  display: inline-block;

  display: flex;
  align-items: center;
}

.title .text {
  height: 20vmin;
  font-weight: bold;
  display: inline-flex;

  align-items: center;

  line-height: 1;
}

标题本身位于以下

div

：

.title {
  width: 100%;

  margin-left: 4vw;

  height: 20vmin;
  display: inline-block;

  display: flex;
  align-items: center;
}

.title .text {
  height: 20vmin;
  font-weight: bold;
  display: inline-flex;

  align-items: center;

  line-height: 1;
}

react textfit

还将在运行时为

.title.text

提供一个以像素为单位的字体大小，以便在

高度
为
20vmin
和
宽度
为
80%

最后，
react textfit
将使用以下样式将文本包装在另一个
div
中：

display: block;
white-space: nowrap;

从本质上讲，在运行时，整个过程是这样的：

<div class="title">
    <div class="text">
        <div style="display: block; white-space: nowrap">TITLE</div>
    </div>
    <div class="some-other-element-that-should-be-vertically aligned">...</div>
</div>


标题
...

是否需要使用CSS删除文本底部多余的空白，以便其他元素可以与之垂直对齐

示例项目（使用普通HTML，而不是React）：
基于您的代码沙盒，我会尝试使用
em
单元，这样所有内容（边距、填充、字体大小等）都将始终与元素（标题）字体大小相关：

.box {
  font-size: 0.5em;
  border: 0.1em solid black;
  height: auto;
  white-space: nowrap;

  margin: 0 0.1em 0;

  ...
}

.box span {
  margin-top: 0.2em;
}

你有没有可能创造出一个简单的复制品，这样我们就可以玩它了？@CallumMorrisson。React由于任何原因都无法使用上载的字体，因此我在普通html项目中模拟了React textfit的效果。@Orion31我会尝试使用
em
on框处理与标题字体大小相关的所有内容。这实际上不起作用，因为字体大小没有设置为
。title
，但由
react textfit
自动确定，仅适用于
.text
。否则，我认为ems中的页边空白顶部会起作用。我知道标题可能没有特定的字体大小，但它确实引用了上层的某个字体大小，尽管如果你说它不起作用，那么它就不起作用，希望你能有一个方法来展示你的真实例子，这样我们就可以对苹果进行比较。我想我明白了你所说的应用于文本而不是标题的意思，你有没有可能把框放进去。文本？把框放进去
。text
奏效了，谢谢！