Größe ändern, um Behälter vollständig zu füllen

Ich habe eine div mit einer festen Höhe und einer Flüssigkeitsbreite (15% von body Breite). Ich möchte, dass der Absatztext innen vollständig die div füllt; nicht überlaufen und nicht unterfüllen.Größe ändern, um Behälter vollständig zu füllen

Ich habe versucht mit jQuery die Textgröße zu erhöhen, bis die Höhe des Absatzes gleich der Höhe des Containers div ist. Zu diesem Zeitpunkt sollte der Text die div vollständig abdecken. Das einzige Problem ist, dass die Schriftgröße in Schritten von 0,5 Pixeln erhöht wird. Sie können nicht 33,3 px; es muss entweder 33.0px oder 33.5px sein. So ist mein Text bei 33px viel zu kurz, um die div abzudecken, und bei 33,5px läuft er über.

Hat jemand irgendwelche Ideen, wie man das beheben kann? Es gibt viele Plugins, mit denen Text die gesamte Breite eines Containers füllen kann, aber nicht für Text, der sowohl die Breite als auch die Höhe füllen muss. Zumindest keine, die ich gesehen habe.

<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. Text auf 33px gesetzt. Es ist zu kurz.

Text set at 33.5px. It overflows. Text auf 33,5 px eingestellt. Es läuft über.

Quelle

2014-08-27 Jesse Macleod

Finden Sie die größte Schriftgröße, die passt (33px in Ihrem Beispiel), dann fiedeln Sie mit der 'line-height', damit der Text genauer passt? – RichieHindle

@RichieHindle Interessant. Die einzige Sache ist, dass der Code, den ich gemacht habe, die Schriftgröße auf 33.5px setzt, weil der Absatz bei 33px noch nicht so hoch wie der Container ist ... –

Sie müssen um einen Schritt zurückgehen, wenn Sie den Überlauf feststellen. Führen Sie dann eine ähnliche Schleife durch, um die "Zeilenhöhe" zu erhöhen, und ziehen Sie sie wieder zurück, wenn sie überläuft. – RichieHindle

I adjusted your functionem Einheiten anstelle px zu verwenden, und das Inkrement von "0,5" auf "0,003" eingestellt.

Das Vorschaufenster ist ein wenig unzuverlässig, so check it out in its own window.

Beachten Sie:

Je größer die Schrittweite ist, desto weniger Schleifendurchläufe (und die weniger Verarbeitung).
Je kleiner das Inkrement, desto "feiner" ist die Einstellung und das Ergebnis.

Quelle

2014-08-27 19:51:01

PS - dies verwendet auch @ LinkinTEDs Methode zum Anpassen der Zeilenhöhe. –

Danke dafür, es ist fast da. Der Text überspringt manchmal nur ein wenig ... Vielleicht könnten wir den Absatz die Größenänderung stoppen lassen, wenn er 10 px von der Containerhöhe erreicht; nur so gibt es definitiv keinen Überlauf. –

Wenn Sie beabsichtigen, dass diese Funktion für mehrere "Boxen" verwendet wird, berücksichtigen Sie eine prozentuale Bewertung "gut genug" (im Gegensatz zu einer definierten Anzahl von Pixeln). –

Größe ändern, um Behälter vollständig zu füllen

Antwort

Verwandte Themen