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

【问题标题】：How to make font size adapt to character length如何使字体大小适应字符长度
【发布时间】：2016-06-27 06:05:26
【问题描述】：

如何使段落的字体大小根据字符长度自动适应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，因为该段落的字符长度很短。

【问题讨论】：

【解决方案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

【讨论】：

不使用 textFit 先生。当我在 div 中只有 2 个字符时。字体大小没有变大。
我误解了你的问题，对不起，你可能想计算字数并为你想要的每个间隔选择一个大小。考虑阅读此css-tricks.com/set-font-size-based-on-word-count
谢谢你顺便说一句，我只想通过一个 div 可以有多少字符来转换字体大小。示例：如果 Lorem ipsum，则转换 font-size:15px；如果 Lorem ipsum dolor sit amet，则转换 font-size:5px; @kunamatata