मेरे पास एक निश्चित ऊंचाई और तरल चौड़ाई (body चौड़ाई का 15%) के साथ div है। मैं अनुच्छेद पाठ को पूरी तरह से div भरने के लिए चाहता हूं; अतिप्रवाह नहीं है और नीचे नहीं है।कंटेनर को पूरी तरह से भरने के लिए पाठ का आकार बदलें
मैंने jQuery आकार के साथ टेक्स्ट आकार बढ़ाने के लिए कोशिश की है जब तक कि अनुच्छेद की ऊंचाई div की ऊंचाई के बराबर न हो। उस बिंदु पर, पाठ पूरी तरह से div को कवर करना चाहिए। एकमात्र समस्या यह है कि 0.5px मानों में फ़ॉन्ट-आकार की वृद्धि। आप 33.3 पीएक्स नहीं कर सकते; यह या तो 33.0 पीएक्स या 33.5 पीएक्स होना चाहिए। तो 33 पीएक्स पर, मेरा पाठ div को कवर करने के लिए बहुत छोटा है, और 33.5 पीएक्स पर यह बहती है।
क्या किसी के पास इसका समाधान करने के बारे में कोई विचार है? टेक्स्ट को कंटेनर की पूरी चौड़ाई भरने के लिए बहुत से प्लगइन हैं, लेकिन पाठ के लिए नहीं, जो चौड़ाई और ऊंचाई दोनों को भरना है। कम से कम, मैंने देखा है कि कोई भी नहीं।
<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>
पाठ 33px पर निर्धारित किया है। यह बहुत छोटा है।
टेक्स्ट 33.5px पर सेट है। यह बहती है।
टेक्स्ट को फिट करने के लिए 'लाइन-ऊंचाई' के साथ फ़िट होने वाला सबसे बड़ा फ़ॉन्ट आकार (अपने उदाहरण में 33 पीएक्स) ढूंढें, फिर टेक्स्ट को और अधिक सटीक बनाने के लिए? – RichieHindle
@ रिची हिंडल दिलचस्प। केवल एक चीज यह है कि मैंने जो कोड बनाया है, वह 33.5 पीएक्स पर फ़ॉन्ट आकार को 33.5x पर रखता है, पैराग्राफ कंटेनर जितना ऊंचा नहीं है ... –
आपको ओवरफ़्लो का पता लगाने पर एक चरण से पीछे हटना होगा। फिर 'लाइन-ऊंचाई' को बढ़ाने के लिए एक समान लूप करें, फिर इसे एक चरण से पीछे हटाना जब यह बहती है। – RichieHindle