Question

是否可以动态地将文本宽度拉伸到其父级的文件？换句话说，我希望动态获得以下结果。需要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>

Answer 1

我会推荐jQuery插件＆＃34; FitText＆＃34; （http://fittextjs.com）

示例：

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

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

使用CSS拉伸字体以适合父级的宽度

1 个答案: