12
मैं अपने div के अंदर पाठ को मूल आकार में % प्रतिशत अनुपात में एक ही आकार में रहने के लिए चाहता हूं। आईई। मैं चाहता हूं कि मेरे पाठ में 50% माता-पिता div चौड़ाई के font-size हों। तो जब पृष्ठ का आकार बदल रहा है, पाठ हमेशा % में एक ही आकार बना रहता है।पैरेंट आकार के सापेक्ष फ़ॉन्ट आकार कैसे बनाएं?
.counter-holder{
\t display: block;
\t position: absolute;
\t width:90%;
\t height:20%;
\t top: 70%;
\t left: 50%;
\t /* bring your own prefixes */
\t transform: translate(-50%, -50%);
}
.counter-element-box{
\t position:relative;
\t vertical-align: text-top;
\t border-style: solid;
border-width: 1px;
width: 20%;
height: 100%;
float:left;
margin: 6%;
}
.counter-element-text{
\t position:absolute;
\t top:50%;
\t width: 50%;
\t max-width:50%;
\t display: inline-block;
\t height:100%;
\t margin-left:50%;
\t font-size : 80%;overflow: hidden;
}
.counter-element-value{
\t position:absolute;
\t top:50%;
\t width: 50%;
\t max-width:50%;
\t display: inline-block;
\t height:100%;
\t padding-left:30%;
\t font-size : 80%;overflow: hidden;
}<div class="counter-holder">
\t <div class="counter-element-box">
\t \t <div id="years" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t Years
\t \t </div>
\t </div>
\t <div class="counter-element-box">
\t \t <div id="missions" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t Missions
\t \t </div>
\t </div>
\t <div class="counter-element-box"> \t
\t \t <div id="team" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t \t Team
\t \t </div>
\t </div> \t \t \t
</div>भागो पूर्ण स्क्रीन में इस स्निपेट और पेज का आकार बदलने की कोशिश करें और देखें कि पाठ का आकार बदल रहा है और div अंदर फिटिंग नहीं:
यहाँ मैं के बारे में बात कर रहा हूँ है सीमाओं। मैं इसे कैसे होने से रोक सकता हूं, इसलिए यह हमेशा सीमाओं के अंदर रहता है?
क्या आप 'font-size'and नहीं' width' बदलने टा चाहते हैं? – Core972
मैंने दोनों किया, यह मदद नहीं करता है। साथ ही विकल्पों में से एक को छोड़कर। पाठ अभी भी आकार बदल रहा है। – Tachi
https://stackoverflow.com/q/10292001/2615878 पर कई अच्छे उत्तरों के साथ एक समान प्रश्न है। – Theophilus