न्यूनतम चौड़ाई, अधिकतम-चौड़ाई सीएसएस छोटी चौड़ाई का उपयोग

Question

ठीक है, तो मैं जो करने की उम्मीद कर रहा हूं वह एक डीआईवी बनाना है जो उस सामग्री के आधार पर ऑटोोज़ाइज करेगा, लेकिन इसे सबसे छोटी चौड़ाई का उपयोग करना चाहिए। मुझे यह नहीं पता कि यह कैसे करना है।

तो, यदि मेरे पास एक डीआईवी टैग है जिसमें 3 वर्ण हैं जो 200px चौड़े के तहत कोई संदेह नहीं है, तो मैं चाहता हूं कि div 200px हो। यदि वहां बहुत अधिक टेक्स्ट है तो मैं इसे ऑटो आकार में लेना चाहता हूं ताकि पाठ फिट हो जाए।

** सिर्फ *** सीएसएस के साथ इस संभव है *? ****

** अद्यतन **

मुझे देखने अगर मैं इस बेहतर व्याख्या कर सकते हैं करते हैं। मैं एक DIV है:

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-----text this longer text-----| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++ 

मैं ऐसा करने के लिए क्या आशा करता हूं कि अगर पाठ बदल गया है यह अभी भी कम से कम 200px विस्तृत हो जाएगा। इस तरह:

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-------------text--------------| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++ 

लेकिन अगर यह भी लंबे समय तक पाठ था तो पहला उदाहरण यह अतीत 200px विस्तृत जावक का विस्तार जारी होगा:

++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
|----------------------------------------------------| 
|-----text this longer texttext this longer text-----| 
|----------------------------------------------------| 
++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

हालांकि, मैं एक सीमा होती है (अंतरिक्ष की सीमित मात्रा में) कि यह जा सकता है इसलिए मुझे अधिकतम चौड़ाई लगाने की जरूरत है। क्या यह समझ में आता है या क्या मुझे चीजों को और स्पष्ट करने की ज़रूरत है? 100% स्क्रीन चौड़ाई के -

Answer 1

समस्या यह है कि <div> एस ब्लॉक-स्तर तत्व हैं, इसलिए वे अपनी सामग्री को फिट करने के लिए स्वत: आकार बदलते नहीं हैं, हालांकि उनकी चौड़ाई स्पष्ट रूप से परिभाषित की जा सकती है। <span> जैसे इनलाइन तत्व अपनी सामग्री को फिट करने के लिए ऑटो-आकार करते हैं, लेकिन वे सीएसएस के माध्यम से अपनी चौड़ाई को परिभाषित करने को स्वीकार नहीं करते हैं। वर्कअराउंड आपके <div> को टेबल सेल की तरह व्यवहार करना है।यहाँ एक उदाहरण है:

सीएसएस:

.widthlim { 
    min-width: 200px; 
    max-width: 1000px; 
    background-color: red; /*This is just for us to be able to see the width*/ 
    display: table-cell; 
    word-wrap: break-word; 
    word-break: break-word; 
} 

HTML:

Example 1:<br/> 
<div class = "widthlim"> 
Hello 
</div> 
Example 2:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 
Example 3:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 

(ध्यान दें कि कैसे हम पहले <div> रों <br/> रों जोड़ने के लिए क्योंकि वे अब पूरी तरह से ब्लॉक स्तर कर रहे थे) ।
यहां बताया गया है कि यह कब प्रदर्शित होता है: यह फ़ायरफ़ॉक्स, क्रोम और आईई 8 पर काम करता है (IE8 के लिए आपको एक DOCTYPE निर्दिष्ट करने की आवश्यकता है)। मुझे उम्मीद है कि मदद की!

Answer 2

तो मैं समझ गया कि तुम क्या बारे में सही ढंग से पूछ रहे हैं, <div> रों ब्लॉक तत्वों, जिसका अर्थ है कि डिफ़ॉल्ट रूप से वे एक पूरी लाइन अप एक लूँगा कर रहे हैं। इसके बजाय <span> तत्व का उपयोग करने का प्रयास करें।

आशा है कि मदद की है, लेकिन यदि आप निर्दिष्ट करते हैं कि आप किस व्यवहार को करने या प्राप्त करने का प्रयास कर रहे हैं, तो हम आपकी सहायता कर सकते हैं।

Answer 3

आप कुछ अलग तरीकों से एक div को "सिकुड़-लपेट" सकते हैं। सबसे आसान संभवतः display: inline; है लेकिन एक फ्लोट व्यवहार जैसा व्यवहार करेगा जैसा आप वर्णन करते हैं।

विवरण और अधिक विधियों के लिए http://haslayout.net/css-tuts/CSS-Shrink-Wrap देखें।

यदि आप न्यूनतम चौड़ाई 200px (अपने पहले अनुच्छेद के विरोधाभासी) चाहते हैं तो आप उदाहरण के लिए display: inline-block के साथ min-width: 200px; का उपयोग कर सकते हैं।