एकल-रेखा प्रदर्शन

Question

के लिए प्रोग्रामेटिक रूप से फ़ॉन्ट-साइज निर्धारित करें मैं एक पृष्ठ पर आलेख प्रदर्शित कर रहा हूं। लेख शीर्षक कभी-कभी दो पंक्तियों पर फैलता है, और दूसरी पंक्ति पर केवल एक ही शब्द हो सकता है। यह बहुत अवांछनीय है। JQuery/CSS का उपयोग करके, शीर्षक के लिए उन्हें एक पंक्ति पर रखने के लिए प्रोग्रामेटिक रूप से नया फ़ॉन्ट-आकार निर्धारित करने का सबसे अच्छा तरीका क्या होगा?

Answer 1

एक हैक की तरह लेकिन इस तरह आप मिल जाएगा बंद करे। यह शायद थोड़ा और tweeking की जरूरत है। असल में, यह तत्व क्लोन करता है और क्लोन के पाठ को & nbsp पर सेट करता है, इसलिए यह एक विचार है कि एक पंक्ति की ऊंचाई क्या होगी। फिर यह तत्व के फ़ॉन्ट आकार को तब तक कम करता है जब तक यह लक्ष्य ऊंचाई से छोटा न हो।

ध्यान रखें कि आपको इस फ़ंक्शन को माता-पिता के आकार() में संलग्न करने की भी आवश्यकता होगी।

$(document).ready(function() { 
    $(".shrink").each(function() { 
     var targetHeight = $(this).clone().html(" ").insertAfter($(this)); 

     while ($(this).height() > targetHeight.height()) { 
      $(this).css("font-size", parseInt($(this).css("font-size")) - 1); 
     } 

     targetHeight.remove(); 
    }); 
}); 

Answer 2

मैं बस अनुमान लगा रहा हूं - क्या हम पाठ के कंटेनर की ऊंचाई जानने के लिए जेएस का उपयोग कर ऐसा कर सकते हैं और फिर आवश्यक होने पर फ़ॉन्ट आकार कम कर सकते हैं? मुझे लगता है कि यह बदलाव के कारण पेज सामग्री का आकार बदल देगा।

Answer 3

आप बस गिन सकते हैं कि शीर्षक में कितने अक्षर हैं और उस पर आधारित फ़ॉन्ट आकार का काम करें। अधिक अक्षर = छोटे फ़ॉन्ट आकार।

हालांकि मैं मूर्खतापूर्ण परिणामों को रोकने के लिए फ़ॉन्ट आकार को कितना बड़ा और कितना छोटा करने की अनुमति दूंगा, इस पर कैप्स लगाएंगे।

Answer 4

एक साधारण समाधान लाइन के अंत में एक तत्व को सही रखना होगा, और टेक्स्ट ऑफसेट को तब तक कम कर देगा जब तक कि यह ऑफसेट सही न हो। उदाहरण के लिए, में पूर्ण बंद लपेट:

<span id="check">.</span> 

अब आप देख सकते हैं, जहां आपके पूर्ण विराम है, और पाठ आकार को कम जब तक यह आप जहां आशा व्यक्त की के नजदीक है। यदि आप इस विशेष वाक्यांश पर रेखा-ऊंचाई को बहुत बड़े होने के लिए सेट करते हैं, तो यह निर्धारित करना आसान बनाता है।

Answer 5

वर्णों की गणना करना एक समाधान है, लेकिन आपको पात्रों की चौड़ाई को ध्यान में रखना होगा। 'डब्ल्यू' 'i' से बड़ा है, जब तक कि आप निश्चित-चौड़ाई वाले फोंट का उपयोग नहीं कर रहे हों।

इसके अलावा, आप गारंटी नहीं दे सकते अपनी पसंद के उस फ़ॉन्ट ग्राहक के ब्राउज़र में उपलब्ध हो जाएगा, कि उसकी font-size सेटिंग्स एक ही ar तुम्हारा हो जाएगा, आदि

हालांकि, आप दो समाधान गठजोड़ कर सकते हैं - पहला, उदाहरण के लिए, कुछ वर्ण-गिनती एल्गोरिदम का उपयोग करके अनुमानित फ़ॉन्ट-आकार - मान लीजिए कि वर्णों ने चौड़ाई तय की है, और उसके बाद क्लाइंट-साइड जेएस के साथ अपनी गणना को सही करें, यदि जेएस निर्धारित करता है कि रेखा को वैसे भी विभाजित किया गया है।

इसे कुछ ट्यूनिंग की आवश्यकता होगी, लेकिन मेरा मानना ​​है कि स्वीकार्य परिणाम प्राप्त किए जा सकते हैं।

Answer 6

मुझे लगता है कि आपके पास एक डिफ़ॉल्ट टेक्स्ट आकार है, इसलिए इसे सेट करें, और ऑफसेट की ऑफसेट की जांच करें। तो यह स्पष्ट रूप से दो पंक्तियों है, फ़ॉन्ट आकार हटना जब तक offsetHeight नाटकीय रूप से लगभग 50%

एक उदाहरण jQuery का उपयोग करके कम कर देता है ...

var defaultSize = 36; // if title is taller than this, it will be shrinked 

$(".articleTitle").each(function() { 
    var h = $(this).height(); 
    var i = defaultSize; 
    while(h > defaultSize) { 
    i--; 
    this.style.fontSize = i + 'px'; 
    h = $(this).height(); 
    } 
});