jquery - 別の div に対応する固定幅要素の動的フォント サイズ変更

Question

固定幅の div に収まるようにテキストのサイズを自動的に変更するソリューションを探しています。

唯一のトリッキーなことは、それらのいくつかでは、両方のフォントサイズを最小サイズに一致させる必要があることです (両方の要素が常に同じサイズであることを保証するため)。同じクラス名または相関関係を示す何か。

ありがとう！

Answer 1

したがって、入力と出力の束が与えられた場合：

<div class="inputs">
    <input type="text" value="John Smith">
    <input type="text" value="Jane Doe">
</div>

<ul class="outputs">
    <li></li>
    <li></li>
</ul>

この関数を使用して、出力を入力にバインドします。

function sync( inputs, outputs ) {
    var max_width, max_size, curr_size;

    function curr_max_width() {
        return Math.max.apply( null, $( outputs ).map( function () {
            return $( this ).width();
        }).get() );
    }

    outputs = $( outputs ).wrapInner( '<span />' ).children().get();
    max_width = $( outputs ).parent().width();
    max_size = parseInt( $( outputs ).css( 'font-size' ), 10 );

    $( inputs ).bind( 'keyup change', function ( e ) {      
        $( outputs ).text( function ( i ) {
            return $( inputs ).eq( i ).val();
        });

        curr_size = 0;        
        do {
            curr_size += 1;
            $( outputs ).css({ 'font-size': curr_size + 'px' });
        } while ( curr_max_width() < max_width && curr_size < max_size );

        $( outputs ).css({ 'font-size': ( curr_size - 1 ) + 'px' });
    }).triggerHandler( 'change' );
}

使用法：

var inputs = $( 'input:text', '.inputs' ).get();
var outputs = $( 'li', '.outputs' ).get();

sync( inputs, outputs );

ライブデモ： http： //jsfiddle.net/HF4W4/18/

したがって、この関数は、最初の引数として要素の配列を、2番目の引数としてブロック要素のsync配列を想定しています。<input>出力要素が設定されている必要があることに注意してくださいwhite-space: nowrap。このsync関数は、出力要素を要素に内部ラップして<span>、コンテンツの幅を読み取れるようにします。

Answer 2

最初にdivを非表示にして、jqueryを使用して、ボックスが大きくなり始めるまでフォントサイズを徐々に大きくしますか? 秘訣は、min-height と min-width の値から始めることです。

<div id="myBox" style="min-width: 100px; min-height: 100px;"></div>

var startWidth = $('#mybox').css('width');
var fontSize = 5;
while($('#mybox').css('width') != startWidth)
{
  fontSize++;
  $('#mybox').css('font-size',fontSize+'px');
}

完全にテストされていませんが、アイデアを得る必要がありますか?