如何用CSS实现字体拉伸适配Div尺寸？是否需要JavaScript？

首先你预想的CSS写法是无效的：font-stretch仅支持字体内置的拉伸变体（比如condensed、expanded），无法按容器比例自由拉伸；transform: div()更是不存在的语法。下面分两种场景给出可行方案：

一、纯CSS实现（固定场景） #

如果容器尺寸和文本内容固定，可以通过transform: scale()手动计算缩放比例，模拟图片适配的拉伸效果：

/* 容器样式 */
.text-container {
  width: 400px;
  height: 120px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 拉伸文本样式 */
.stretched-text {
  font-size: 28px;
  /* 按容器宽高/文本原始宽高计算缩放值 */
  transform: scaleX(400/(28*6)) scaleY(120/28);
  transform-origin: center; /* 确保从中心拉伸 */
}

注：示例中假设文本为"STRETCH"（6个字符），等宽字体下每个字符宽度近似等于字体大小，需根据实际字体和内容调整计算值。

二、JavaScript动态适配（通用场景） #

如果需要文本自动适配容器的动态尺寸（比如窗口 resize、容器大小变化），或支持任意文本内容，必须用JS实时计算缩放比例：

<div class="text-container">
  <p class="stretched-text">自适应拉伸文本</p>
</div>

<script>
const container = document.querySelector('.text-container');
const textElement = document.querySelector('.stretched-text');

function adjustTextStretch() {
  const containerW = container.offsetWidth;
  const containerH = container.offsetHeight;
  const textW = textElement.offsetWidth;
  const textH = textElement.offsetHeight;

  // 计算宽高方向的缩放比例
  const scaleX = containerW / textW;
  const scaleY = containerH / textH;

  textElement.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
}

// 初始化执行
adjustTextStretch();
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustTextStretch);
</script>

<style>
.text-container {
  width: 100%;
  height: 200px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stretched-text {
  font-size: 24px;
  transform-origin: center;
}
</style>

总结 #

• 纯CSS仅适用于固定容器尺寸+固定文本内容的场景，需手动计算缩放值；
• 要实现完全动态的适配效果，必须借助JavaScript实时计算容器与文本的尺寸比例，设置transform: scale()。

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