如何使字体大小适应字符长度

Question

如何使段落上的字体大小自动适应div的空格取决于字符的长度？

示例1

p{
 font-size:15px;
}

<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, quis.</p>
</div>

由于该段落的字符长度较长，因此字体大小仅为10px。

如果喜欢这个

<div class="caption">
<p>Lorem</p>
</div>

字体大小为20px，因为该段落的字符长度很短。

Answer 1

CSS vw和vh单位允许根据浏览器的视图宽度和视图高度调整大小。这是一篇关于视图高度和视图宽度单位的好文章：https://css-tricks.com/viewport-sized-typography/

尝试使用它，例如：

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

此外，我不确定这是否适用于在div中缩放文本。上面的解决方案适用于视口，它是浏览器窗口的大小。如果你想让它适用于div我会建议使用javascript，因为我怀疑css是否适用于它自己。 您可以使用它来缩放文本：TextFit

总结

如果您希望文本大小取决于浏览器窗口宽度，请使用第一个给定的解决方案。在CSS中使用vh和wh单位。
如果要根据容器宽度调整字体大小，请使用javascript计算或使用给定工具：TextFit