使用 CSS 拉伸字体以适应父级的宽度答案

【问题标题】：Stretch font with CSS to fit parent’s width使用 CSS 拉伸字体以适应父级的宽度
【发布时间】：2015-01-15 10:46:34
【问题描述】：

是否可以将文本宽度动态拉伸到其父级的宽度？换句话说，我希望动态地获得以下结果。需要 Javascript 的解决方案都可以。

div{
  width:260px;
  border:1px solid tomato;
  background:white;
  font-size:20px;
  font-family:arial;
}
.p1{
  transform:scale(2.3,1);
  -webkit-transform:scale(2.3,1);
  -moz-transform:scale(2.3,1);
  -ms-transform:scale(2.3,1);
  -o-transform:scale(1,1.09);
  transform-origin: 0 0;
}
.p2{
  transform:scale(5.1,1);
  -webkit-transform:scale(5.1,1);
  -moz-transform:scale(5.1,1);
  -ms-transform:scale(5.1,1);
  -o-transform:scale(5.1,1);
  transform-origin: 0 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TEEEEXT</title>
</head>
<body>
<div>
  <p class="p1">This is a test</p>
  <p class="p2">A test</p>
</div>
</body>
</html>

【问题讨论】：

这里有一个解决方案，使用 jQuery 计算字母间距，以便文本填充容器的宽度：Stretch text to fit width of div
感谢@web-tiki，它不能解决我的问题，但它是一个有用的资源。
您找到解决方案了吗？我原以为现在有人会想到这一点，但显然这是一种罕见的设计需求。除了 fittext（正如您已经注意到的那样，它会按比例调整大小）之外，我还没有找到任何可以削减它的东西。
@chase 我认为目前的解决方案是像 opensource.london 那样使用 SVG
酷，谢谢。幸运的是，我正在扩展的只是几天/几个月/日期，所以我知道 SVG 是一种选择，但试图避免它......但是，无论完成什么工作！感谢回复

标签： javascript css transform

【解决方案1】：

我会推荐 jQuery 插件 "FitText" (http://fittextjs.com)

例子：

$('#div').fitText();

它会自动调整选择器的字体大小以适应 div。当然，还有其他选项可以调整最大和最小尺寸。

【讨论】：

但是该网站明确警告不要在段落文本上使用！ :) "哦，你不敢让我们在段落文本上使用 FitText 来抓到你。这仅用于巨大的显示文本！"
谢谢，但我需要文本 not 像我的演示显示的那样按比例拉伸。