我需要将用户输入的文本显示到固定大小的 div 中。我想要的是自动调整字体大小,以便文本尽可能地填充框。
所以 - 如果 div 是 400px x 300px。如果有人输入ABC,那么它的字体真的很大。如果他们输入一个段落,那么它将是一个小字体。
我可能希望从最大字体大小开始 - 可能是 32 像素,当文本太大而无法容纳容器时,缩小字体大小直到适合。
最佳答案
谢谢 Attack .我想使用 jQuery。
你指出了我正确的方向,这就是我最终的结果:
这是插件的链接:https://plugins.jquery.com/textfill/
以及来源链接:http://jquery-textfill.github.io/
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
而我的html是这样的
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
这是我的第一个 jquery 插件,所以它可能没有它应该的那么好。当然欢迎指点。
关于jquery - 自动调整大小的动态文本以填充固定大小的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/687998/