jquery - 与另一个 div 对应的固定宽度元素的动态字体大小调整

Question

我正在寻找一种解决方案，该解决方案将自动调整固定宽度 div 中某些文本的大小以适合。

唯一棘手的是，在其中一些上，我需要两种字体大小都匹配最小的大小（以确保两个元素的大小始终相同。）我认为这可以通过给它们来实现相同的类名或其他表示相关性的东西。

谢谢！

Answer 1

也许隐藏div开始并使用jquery逐渐增加字体大小，直到你的盒子开始增加？诀窍是从最小高度和最小宽度值开始。

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

完全未经测试，但你应该明白吗？

Answer 2

所以，给定一堆输入和输出：

<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/

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