कहें कि div में 300px चौड़ाई है, मैं टेक्स्ट का फ़ॉन्ट-आकार कैसे सेट करूं, ताकि यह हमेशा चौड़ाई का 100% ले ले, क्योंकि टेक्स्ट कभी भी समान लंबाई नहीं है (पाठ कुछ गतिशील शीर्षक उत्पन्न होता है PHP द्वारा)। छोटे पाठ में बड़े पाठ, आदिपाठ को इसके कंटेनर की पूरी चौड़ाई कैसे लेना है?
से अधिक फ़ॉन्ट होना चाहिए, जो आप पूछ सकते हैं शायद नहीं किया जा सकता है। text-align:justify पैराग्राफ टेक्स्ट को दाएं तरफ बढ़ाएगा, लेकिन आप हेडर के आकार को समायोजित नहीं कर सकते हैं, इसलिए इसकी 100% चौड़ाई है।
संपादित करें: वास्तव में, वास्तव में, एक जेएस लाइब्रेरी मौजूद है जो ऐसा करने लगता है। http://fittextjs.com। फिर भी, कोई शुद्ध-सीएसएस समाधान उपलब्ध नहीं है।
यह एक अच्छा समाधान की तरह दिखता है! आपका बहुत बहुत धन्यवाद! –
मैक्सवेल, चेकबॉक्स पर क्लिक करके इस उत्तर को स्वीकार करें। – John
हालांकि कि चाल मैं इसे एक नया खाली पंक्ति जोड़ने के लिए रोकने के लिए अपने तत्व से ऊंचाई के लिए मजबूर करने के लिए किया था का उपयोग कर मुझे
div {
text-align: justify;
}
div:after {
content: "";
display: inline-block;
width: 100%;
}
के लिए चाल किया था।
मैं Force single line of text in element to fill width with CSS
से है कि इसका जवाब ले लिया इसके अलावा यहां स्पष्टीकरण के लिए देखो है: http://blog.vjeux.com/2011/css/css-one-line-justify.html
मूल रूप से: https://stackoverflow.com/questions/21199057/force-single-line-of-text-in-element-to-fill-width-with-css – atilkan
मैं इस के लिए एक वेब घटक बना लिया है:
https://github.com/pomber/full-width-text
यहाँ डेमो की जाँच करें:
https://pomber.github.io/full-width-text/
उपयोग इस तरह है:
<full-width-text>Lorem Ipsum</full-width-text>
मैंने फ़ॉन्ट आकार के बजाय सीएसएस ट्रांसफॉर्म का उपयोग करके सरल स्केल फ़ंक्शन तैयार किया है।
ब्लॉग पोस्ट: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/
कोड:
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth/scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
कार्य डेमो: https://codepen.io/maciejkorsan/pen/BWLryj
फिर से, ओपी एक सीएसएस समाधान की तलाश में है। – m02ph3u5
देखें इस: http://stackoverflow.com/questions/6803016/css-100- फ़ॉन्ट-आकार-100-के-क्या ... और यह: http://stackoverflow.com/questions/10718840/make-text-height-100-of-div। उम्मीद है कि उन पोस्टों में आपकी मदद करें! – leoMestizo
धन्यवाद, बहुत उपयोगी। –
संभावित डुप्लिकेट [सीएसएस के साथ चौड़ाई भरने के लिए तत्व में टेक्स्ट की एक पंक्ति की फोर्स] (https://stackoverflow.com/questions/21199057/force-single-line-of-text-in-element-to-fill-width -with-css) – atilkan