如何根据文本长度及屏幕宽度缩放h1元素？

要实现h1元素全屏缩放、适配屏幕宽度与自身内容宽度且文本不换行，只需在现有代码基础上调整以下几点：

• 添加white-space: nowrap强制文本不换行
• 移除width: 100%，改用width: fit-content让元素宽度由内容决定，同时用max-width限制最大宽度避免超出视口
• 优化字体大小计算逻辑，同时适配视口宽高与内容尺寸

调整后的完整代码：

h1 {
  font-size: clamp(6rem, min(12vw, 95vh / 1.5), 20rem);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  max-width: 95vw; /* 给左右留边距，避免贴紧屏幕边缘 */
  text-align: center;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 可选：极端情况防止内容溢出视口 */
  text-overflow: ellipsis; /* 可选：溢出时显示省略号 */
}

<h1>Hey</h1>

关键说明： #

• white-space: nowrap：彻底阻止文本换行，确保内容始终在一行显示
• width: fit-content：让h1宽度仅包裹自身文本，而非占满整个视口
• max-width: 95vw：限制元素最大宽度为视口的95%，避免内容过宽时超出屏幕
• min(12vw, 95vh / 1.5)：字体大小同时参考视口宽度的12%和视口高度的约63%，取较小值，确保文本不会超出屏幕上下边缘

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