基于用户名长度的 CSS 缩放文本答案

【问题标题】：CSS Scale Text Based on Username Length基于用户名长度的 CSS 缩放文本
【发布时间】：2021-10-24 21:01:17
【问题描述】：

我在 Twitch 上直播，我的面部摄像头下方有一个叠加层，显示最近与我的直播互动的人的用户名。每当用户名太长而无法放入上述面部摄像头叠加层时，它就会被推到一半之外，从而使文本无法阅读。使用 CSS 使用户名根据其长度自动缩放的最简单方法是什么？

这是用户名的 CSS 代码目前的样子：

.username {
  text-transform: uppercase;
  font-family: {{fontFamily}};
  width: 100%;
  text-align: center;
  padding-top: 2px;
}

使用正常长度的用户名：

使用长用户名：

【问题讨论】：

嗯，最简单的方法是不定义 height 属性值或将其值保持为 auto 。这样背景将覆盖所有文本。如果只有height:auto 不起作用，也可以使用overflow: auto 和简单的解决方案
stackoverflow.com/questions/16056591/…

标签： css twitch twitch-api

【解决方案1】：

如果您知道用户名的长度是可能的，但您必须做一些数学运算第一的，您必须确定可以在框中显示而不会溢出的用户名的最大长度。

然后你必须在它的末尾添加一个字符，这样它就会溢出，然后改变字体大小直到它再次适合。

再次执行此操作以获取字体和框宽度的每个字符和字体大小之间的差异。在下面的演示中，宽度为 48px，字体大小为 13.2px 的框适合 6 个字符，但对于 7 个字符，我需要从字体大小中减去 2 px，对于 7 个字符，则需要多 1px，依此类推。

由于每个字符彼此需要 1px，但第一个溢出字符需要多 1.2px，我们需要在末尾添加 1.2px。

box width	48	48	48	48
font size	13.2px	10.2px	9px	8px
characters	6	7	8	9

font-size:calc(var(--fontsize) - calc(calc(var(--usernamelength) - var(--maxusernamelength)) + 1.2px))

我使用 HTML 样式为用户名长度创建了一个 CSS 变量，因此我可以在 CSS 中使用它。 9px 表示 9 个字符

:root{
  --maxusernamelength:6px;
  --fontsize:13.2px;
}
.username {
  text-transform: uppercase;
  width: 48px;
  text-align: center;
  padding-top: 2px;
  overflow:hidden;
  font-size:calc(var(--fontsize) - calc(calc(var(--usernamelength) - var(--maxusernamelength)) + 1.2px))
}

<div class="username" style="--usernamelength:9px">
testttest
</div>

【讨论】：