我看过一些类似的帖子并尝试了给出的答案,但我似乎无法让它工作(无论如何对我来说)。
基本上我正在寻找能够自动调整(放大或缩小)我的文本以适应多行设置宽度 div 的东西。其中第 1 行是最大的,第 2 行较小,第 3 行最小的文本大小,并且(希望)证明文本的合理性。如果这有任何意义吗?
任何帮助,将不胜感激!:)
编辑:我忘了提到它最多只能运行 2-3 行,设置 div 宽度为 286px。
我尝试了以下代码:
;(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(e){
$('.testimonial').textfill({ maxFontPixels: 36 });
});
$( '.testimonial' ).each(function ( i, box ) {
var width = $( box ).width(),
html = '<span style="white-space:nowrap"></span>',
line = $( box ).wrapInner( html ).children()[ 0 ],
n = 100;
$( box ).css( 'font-size', n );
while ( $( line ).width() > width ) {
$( box ).css( 'font-size', --n );
}
$( box ).text( $( line ).text() );
});