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>

使用此函数将输出绑定(bind)到输入:

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/

因此，sync函数需要一个 <input> 的数组元素作为第一个参数， block 元素数组作为第二个参数。请注意，输出元素应具有 white-space: nowrap放。 sync函数内部包装 <span> 中的输出元素元素，以便它可以读取内容的宽度。