1. घर
  2. सवाल और जवाब
  3. , पाठ आकार में पैमाने कंटेनर

, पाठ आकार में पैमाने कंटेनर

2012-01-24 12 views
18

सीएसएस का उपयोग करना, और विशेष रूप से कोई ऑनलोड जावास्क्रिप्ट फिट करने के लिए है यह यह करने के लिए संभव हो जाएगा:, पाठ आकार में पैमाने कंटेनर

आप 150px विस्तृत और ऊंचाई में 100px के एक सेल है। इसमें एक टेक्स्ट है, उदाहरण: $ 20,00 या उसमें से कोई भी संस्करण।

आप इसे कंटेनर के आकार को पूरी तरह से फिट करना चाहते हैं।

मैं जावास्क्रिप्ट के साथ ऐसा करने में सक्षम हूं, बिना किसी कंटेनर तक पैडिंग/मार्जिन सेल की चौड़ाई और/या ऊंचाई तक पहुंचने तक टेक्स्ट को आकार दें। या इसे उस चीज़ में शामिल करें जिसमें ओवरफ्लो सेट ऑटो हो और देखें कि यह ओवरफ़्लो या कुछ कब होता है।

क्या यह शुद्ध सीएसएस के साथ किया जा सकता है?

ध्यान रखें कि फ़ॉन्ट एक निश्चित आकार फ़ॉन्ट नहीं है, या तो। यदि आप चाहें तो एरियल का प्रयोग करें।

स्रोत

2012-01-24 MHD

+1

मुझे नहीं लगता कि आप jquery का उपयोग किये बिना इसे कर सकते हैं, यह जवाब देखें: http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit – Robert

+0

मैं दूसरा । यह शुद्ध सीएसएस के साथ नहीं किया जा सकता है। – Jonas

+0

आपके सर्वोत्तम परिणाम शायद आपके फ़ॉन्ट आकार में कुछ कैल्क() जादू के साथ होंगे। मैंने कुछ प्रयोग किया है, लेकिन वास्तव में, यदि आपके पास चर नहीं हैं और आप अलग-अलग वर्णों की चौड़ाई निर्धारित नहीं कर सकते हैं, तो आप इसे सीएसएस के साथ नहीं कर सकते हैं। आप शायद [FitText] (http://fittextjs.com) के बारे में जानते हैं, लेकिन यह जेएस के साथ ऐसा करने का आसान तरीका है अन्यथा - आपको बहुत काम बचाता है :) हमें बताएं कि क्या आप कुछ दिलचस्प समाधान के साथ आते हैं, btw । – fredrikekelund

उत्तर

6

एक बात है कि मैंने किया है यह सही नहीं है लेकिन कुछ मामलों में काम किया जा सकता है, स्क्रीन आकारों के लिए @media नियम का उपयोग करने के लिए एक्स पिक्सेल छोटे, फ़ॉन्ट आकार को छोटे या बड़े सेट करें।

h2{ 
    font-size:25px 
} 

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */ 
    h2{ 
    font-size:19px; 
    } 
}

बेशक यह केवल काम करेगा कि ग्रंथों का कंटेनर आकार किसी भी तरह से विंडो आकार पर आधारित है।

स्रोत

2012-12-21 18:40:02 Tyler

संबंधित मुद्दे

 संबंधित मुद्दे