使用css和html根据文本长度动态更改字体大小

作者

我需要将用户输入的文本显示到一个固定大小的div中。我想要的是自动调整字体大小，以便尽可能多地填充文本框

我可能希望从最大字体大小开始，当文本太大而无法容纳容器时，缩小字体大小直到合适为止，并且字体必须显示为单行。是否可以只使用css和html来实现这一点

假设你有这个：

&lt；div id=“outer”style=“宽度：200px；高度：20px；边框：1px纯红；”；
&lt；部门&gt；Lorem ipsum dolor sit amet，是一位杰出的献身者。整只猫咪，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫/部门&gt；
&lt/部门&gt；

然后，您可以执行以下操作：

$（文档）.ready（函数（）{
将_调整为_-fit（）；
});
函数resize_to_fit（）{
var fontsize=$（'div#outer div'）.css（'font-size'）；
$（'div#outer div'）.css（'fontSize'，parseFloat（fontSize）-1）；
if（$（'div#outer div'）.height（）&gt；=$（'div#outer'）.height（））{
将_调整为_-fit（）；
}
}

工作样本

$（document）.ready（function（）{
将_调整为_-fit（）；
});
函数resize_to_fit（）{
var fontsize=$（'div#outer div'）.css（'font-size'）；
$（'div#outer div'）.css（'fontSize'，parseFloat（fontSize）-1）；
if（$（'div#outer div'）.height（）&gt；=$（'div#outer'）.height（））{
将_调整为_-fit（）；
}
}
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“&gt&lt/脚本&gt；
&lt；div id=“outer”style=“宽度：200px；高度：20px；边框：1px纯红；”；
&lt；部门&gt；Lorem ipsum dolor sit amet，是一位杰出的献身者。整只猫咪，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫，一只猫/部门&gt；
&lt/部门&gt

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2024 开发百科-程序代码问答平台 • Built with