我需要将用户输入的文本显示到固定大小的 div 中。我想要的是自动调整字体大小,以便文本尽可能地填充框。
所以 - 如果 div 是 400px x 300px。如果有人输入ABC,那么它的字体真的很大。如果他们输入一个段落,那么它将是一个小字体。
我可能想从最大字体大小开始 - 可能是 32 像素,虽然文本太大而无法容纳容器,但缩小字体大小直到适合。
我想使用 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 插件,所以它可能没有它应该的那么好。指针当然是受欢迎的。