如何使用CSS实现Twitch直播浮层用户名根据长度自动缩放

最简单的纯CSS实现用户名自适应缩放的方案如下，无需引入JavaScript，仅需在原有CSS基础上新增2行属性即可：

.username {
  text-transform: uppercase;
  font-family: {{fontFamily}};
  width: 100%;
  text-align: center;
  padding-top: 2px;
  /* 新增代码 start */
  white-space: nowrap; /* 禁止用户名自动换行，保证始终在单行显示 */
  /* 三个参数依次为：允许的最小字号、自动缩放系数、允许的最大字号，可根据浮层实际尺寸调整数值 */
  font-size: clamp(10px, 2.8cqw, 16px);
  /* 新增代码 end */
}

如果需要适配不支持容器单位cqw的旧版本浏览器，可以将2.8cqw替换为视窗单位2.5vw，根据浮层在页面中的占比调整系数即可。
如果希望适配精度更高，可在用户名的父容器元素上添加如下属性，让cqw单位完全基于浮层宽度计算，不受页面整体尺寸影响：

.username-parent {
  container-type: inline-size;
}

效果参考 #

• 正常长度用户名原始显示效果：
  
• 过长用户名原始异常显示效果（截断）：
  
  适配后过长用户名会自动缩小字号，完整展示全部内容，不会出现截断问题。

内容的提问来源于stack exchange，提问作者TheVisionaryOne