Ho un div con un'altezza fissa e una larghezza del fluido (15% della larghezza body). Voglio il testo del paragrafo all'interno per riempire completamente il div; non overflow e non underfill.Ridimensiona il testo per riempire completamente il contenitore
Ho provato con jQuery per incrementare la dimensione del testo fino a quando l'altezza del paragrafo è uguale all'altezza del contenitore div. A quel punto, il testo dovrebbe coprire totalmente lo div. L'unico problema è che gli incrementi della dimensione dei caratteri nei valori di 0,5 px. Non puoi fare 33.3px; deve essere 33.0px o 33.5px. Quindi a 33px, il mio testo è troppo corto per coprire lo div, e a 33.5px esso trabocca.
Qualcuno ha qualche idea su come rimediare a questo? Ci sono molti plugin per fare riempire il testo per l'intera larghezza di un contenitore, ma non per il testo che deve riempire sia la larghezza che l'altezza. Almeno, nessuno di quelli che ho visto.
<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>
Testo fissato a 33px. È troppo corto
Testo impostato a 33,5 px. Trabocca.
Trova la dimensione del carattere più grande che si adatta (33px nel tuo esempio) quindi armati con l'altezza della riga per rendere il testo più adatto? – RichieHindle
@RichieHindle Interessante. L'unica cosa è che il codice che ho creato mette la dimensione del font a 33.5px perché a 33px, il paragrafo non è ancora alto come il contenitore ... –
È necessario interrompere di un passo quando si rileva l'overflow. Quindi fai un loop simile per aumentare l'altezza della riga, di nuovo facendo un passo indietro quando si rovescia. – RichieHindle