0

私はいくつかの同様の投稿を見て、与えられた答えを試しましたが、これを機能させることができないようです（とにかく私にとって）。

基本的に、テキストを自動的にサイズ変更（拡大または縮小）して、設定された幅divが複数行に収まるようにするものを探しています。1行目が最大、2行目が小さく、3行目が最小のテキストサイズであり、（うまくいけば）テキストが進むにつれてテキストを正当化する場合。

どんな助けでもいただければ幸いです！:)

編集：設定されたdiv幅が286pxの場合、最大で2〜3行しか実行されないことを忘れました。

私は次のコードを試しました：

;(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() );
  });

固定Divに収まるJavaScriptスケールテキスト

4

1 に答える 1

2

説明に基づいてこれを自分でコーディングする必要があります。次のように機能するはずです。

  1. div使用のサイズを取得し.innerWidth()、.innerHeight()
  2. 独自の数式に基づいて、ラッピングdivのサイズに応じて、フォントサイズの大きさに許容値を設定します。$.css('font-size','12px');などを使用してフォントサイズを切り替えます。

したがって、次のようにします。

 // get the size of the div
 var w = $('div').innerWidth();
 var h = $('div').innerHeight();

 // your own formula to your liking
 if (w >= 100) { fontsize = 11 }
 elseif (w >= 200) { fontsize = 12 }
 else { fontsize = 10 }

 //text to resize
 $('div span').css('font-size', fontsize + 'px');

または多分それのためのプラグインがあります、グーグルを試してください。

于 2012-06-27T05:18:47.777 に答える