Изменить размер текста, чтобы полностью заполнить контейнер

У меня есть div с фиксированной высотой и шириной жидкости (15% от body ширины). Я хочу, чтобы текст абзаца внутри полностью заполнил div; не переполнение и не заполнение.Изменить размер текста, чтобы полностью заполнить контейнер

Я попытался с jQuery увеличить размер текста до тех пор, пока высота абзаца не будет равна высоте контейнера div. В этот момент текст должен полностью охватывать div. Единственная проблема заключается в том, что размер шрифта увеличивается в значениях 0.5px. Вы не можете делать 33.3px; он должен быть либо 33.0px, либо 33.5px. Итак, на 33 пикселя, мой текст слишком короткий, чтобы покрыть div, а при 33,5px он переполняется.

Есть ли у кого-нибудь идеи о том, как исправить это? Существует множество плагинов для того, чтобы текст заполнил всю ширину контейнера, но не для текста, который должен заполнять как ширину, так и высоту. По крайней мере, никто из тех, кого я видел.

<head> 
<style type="text/css"> 
.box { 
    display:block; 
    position:relative; 
    width:15%; 
    height:500px; 
    background:orange; 
} 
    .box p { 
     background:rgba(0,0,0,.1); /* For clarity */ 
    } 
</style> 
</head> 

<body> 

<div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br> 
    Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p> 
</div> 

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
function responsiveText(){ 
    var i = 0.5; 

    do { 
     $(".box p").css("font-size",(i) + "px"); 

     var textHeight   = $(".box p").height(), 
      containerHeight  = $(".box").height(); 
     i += 0.5; 

    } while (textHeight < containerHeight);   // While the height of the paragraph block is less than the height of the container, run the do...while loop. 
} responsiveText(); 


$(window).resize(function(e) { 
    responsiveText(); 
}); 
</script> 
</body>

Text set at 33px. It is too short. Текст устанавливается в 33px. Он слишком короткий.

Text set at 33.5px. It overflows. Текст на 33.5px. Он переполняется.

источник

2014-08-27 Jesse Macleod

Найти наибольший размер шрифта, который подходит (33px в вашем примере), а затем скриптировать с помощью 'line-height', чтобы текст соответствовал более точно? – RichieHindle

@RichieHindle Интересно. Единственное, что код, который я сделал, помещает размер шрифта в 33.5px, потому что в 33px абзац еще не высок, как контейнер ... –

Вам нужно отступить на один шаг при обнаружении переполнения. Затем выполните аналогичный цикл, чтобы увеличить «высоту строки», снова отступив на шаг при переполнении. – RichieHindle

I adjusted your function использовать em единиц вместо px и отрегулировать приращение от «0,5» до «0,003».

Панель предварительного просмотра немного ненадежна, поэтому check it out in its own window.

Имейте в виду:

Чем больше приращение, меньше итераций цикла (и тем меньше обработка).
Чем меньше приращение, тем более тонкое регулирование и результат.

источник

2014-08-27 19:51:01

PS - это также использует метод @ LinkinTED для настройки высоты линии. –

Спасибо за это, он почти там. Текст иногда переполняется немного ... Возможно, мы могли бы заставить абзац останавливать изменение размера, когда оно достигает 10 пикселей от высоты контейнера; просто так нет переполнения. –

Если вы намерены использовать эту функцию для нескольких «ящиков», рассмотрите оценку «достаточно хорошо» на основе процента (в отличие от определенного количества пикселей). –

Изменить размер текста, чтобы полностью заполнить контейнер

ответ

Смежные вопросы