Динамическое изменение размера шрифта для элемента фиксированной ширины, соответствующего другому элементу 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/

Итак, функция 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');
}

Полностью не проверено, но вы должны понять?