एक पूरी तरह से स्थित div

Question

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

क्या मुझे यहां कुछ याद आ रही है? धन्यवाद।

#absolute_div 
{ 
background-color: #8cc63f; 
border-top: 1px solid #fff; 
border-bottom: 1px solid #fff; 
padding: 0px 5px 0px 5px; 
width: 44px; 
height: 50px; 
} 

Answer 1

मैं @ वर्णन करने के लिए एलेक्स के jsfiddle उदाहरण के साथ चारों ओर काँटेदार (आगे) वह बिंदु जो वह बना रहा था।

टेक्स्ट आईएस रैपिंग है; हालांकि, आपने ऊंचाई निर्धारित की है। एक कठोर ऊंचाई div विस्तार से रखेगी, जो मुझे लगता है कि आप चाहते थे। अंतरिक्ष को लपेटने और भरने वाले पाठ की मात्रा आपके line-height, font-size और किसी भी अन्य सीएसएस पर निर्भर करती है जो आपने कंटेनर की सामग्री पर लागू की हो।

मैंने जो फोर्कल किया था, उसमें मैंने font-size:10px; line-height:1 सेट किया - टेक्स्ट की 5 रैपिंग लाइनें मिलीं और शेष सामग्री आपके द्वारा निर्धारित घोषणा/ऊंचाई पैरामीटर से छिपी हुई है।

http://jsfiddle.net/Kbzga/

word-wrap, white-space, overflow:visible शायद नहीं आप के बाद जब तक आप पाठ यह, या स्क्रॉलबार से बाहर फैलने के साथ 44x50 हरे बॉक्स कोई आपत्ति नहीं है क्या कर रहे हैं कर रहे हैं। एचटीएच

Answer 2

पूरी तरह से यकीन है कि आप क्या करना चाहते हैं, लेकिन overflow:auto हो सकता है कि आप क्या कर रहे हैं के बाद नहीं।

#absolute_div 
{ 
background-color: #8cc63f; 
border-top: 1px solid #fff; 
border-bottom: 1px solid #fff; 
padding: 0px 5px 0px 5px; 
width: 144px; 
height: 50px; 
overflow:auto;  
} 

http://jsfiddle.net/jasongennaro/Vqukv/

Answer 3

जब आप पूर्ण स्थिति का उपयोग करें, और एक ऊंचाई और चौड़ाई सेट, सामग्री, बॉक्स खुद पर कोई प्रभाव नहीं तो आप सिर्फ एक मिनट ऊंचाई सेट करने के लिए: 50px, और यह इस jsFiddle में यहां दिखाई देने वाले टेक्स्ट के साथ बढ़ेगा।

Answer 4

@lorenz; शब्द रैप करने के लिए आप अपने div में word-wrap संपत्ति का उपयोग करने के रूप में अफ़्शिन उसकी टिप्पणी में कहा उदाहरण के लिए

#absolute_div 

    { 
     background-color: #8cc63f; 
     border-top: 1px solid #fff; 
     border-bottom: 1px solid #fff; 
     padding: 0px 5px 0px 5px; 
     width: 44px; 
     min-height: 50px; 
     overflow:hidden; 
     word-wrap:break-word; 
    } 

जांच इस http://jsfiddle.net/aE8cg/

Answer 5

मुझे थोड़ी देर के लिए इस तरह की समस्या हो रही थी।

मेरे पास एक इंटरफ़ेस था जो उसमें एचटीएमएल की थोड़ी मात्रा के साथ उपयोगकर्ता इनपुट ले रहा था जो इसे दिखाने के लिए पक्ष में प्रदर्शित करेगा।

मेरी समस्या यह थी कि मैं उपयोगकर्ता द्वारा दर्ज की गई सभी रिक्त स्थान   में परिवर्तित कर रहा था, मैं ऐसा करना चाहता था ताकि पाठ को प्रारूपित करने के लिए रिक्त स्थान दर्ज किए जा सकें; इंडेंट्स और पसंद जोड़ें।

प्रभाव हालांकि, यह था कि यह div के अंदर पाठ को लपेटने के बजाय बह रहा था। एक आसान फिक्स इसके बजाय दो रिक्त स्थान को    में परिवर्तित करना है, और अकेले एकल रिक्त स्थान छोड़ना है।

मुझे एहसास है कि यह शायद हर किसी के लिए एक ही कारण नहीं है, लेकिन मुझे आशा है कि यह किसी की मदद करेगी!

Answer 6

यह मेरे लिए काम किया ...इस पोस्ट पर

white-space: pre-wrap;  /* css-3 */ 
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
white-space: -pre-wrap;  /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word;