自动调整动态文本大小以填充固定大小的容器

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

如果div是400px 300px。如果有人进入美国广播公司,那么它的字体真的很大。如果他们输入一个段落,那么它将是一个小字体

我可能希望从最大字体大小开始,可能是32px,当文本太大而无法容纳容器时,缩小字体大小直到合适为止

谢谢你的攻击。我想使用jQuery

你给我指出了正确的方向,这就是我的结局:

以下是该插件的链接:https://plugins.jquery.com/textfill/
和一个指向源的链接:http://jquery-textfill.github.io/

;(函数($){
$.fn.textfill=函数(选项){
var fontSize=options.maxFontPixels;
var ourText=$('span:visible:first',this);
var maxHeight=$(this).height();
var maxWidth=$(this).width();
高度;
变量文本宽度;
做{
css('font-size',fontSize);
textHeight=ourText.height();
textWidth=ourText.width();
fontSize=fontSize-1;
}而((textHeight>maxHeight | | textWidth>maxWidth)&fontSize>3);
归还这个;
}
})(jQuery);
$(文档).ready(函数(){
$('.jtextfill').textfill({maxFontPixels:36});
});

我的html是这样的

<div class='jtextfill'style='width:100px;高度:50px;'&燃气轮机;
<span>我的文本在此&lt/span>
&lt/部门>

这是我的第一个jquery插件,所以它可能没有它应有的好。指针当然是受欢迎的

发表评论