सीएसएस वर्ड-रैपिंग इन डिव

Question

मेरे पास 250px की चौड़ाई के साथ एक div है। जब इनरटेक्स्ट उस से अधिक व्यापक होता है तो मैं चाहता हूं कि वह टूट जाए। Div फ्लोट है: बाएँ और अब एक अतिप्रवाह है। मैं चाहता हूं कि स्क्रॉलबार शब्द-रैपिंग का उपयोग करके चला जाए। इसे कैसे प्राप्त किया जा सकता है?

<div id="Treeview">
<div id="HandboekBox">
    <div id="HandboekTitel">
        <asp:Label ID="lblManual" runat="server"></asp:Label>
    </div>
    <div id="HandboekClose">
        <asp:ImageButton ID="btnCloseManual" runat="server" 
            ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

सीएसएस:

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}

Answer 1

जैसा कि एंड्रयू ने कहा, आपका पाठ बस यही करना चाहिए।

एक उदाहरण है कि मैं सोच सकता हूं कि आपके द्वारा सुझाए गए तरीके से व्यवहार करेंगे, और यदि आपके पास व्हाट्सएप संपत्ति सेट है।

देखें कि कहीं आपके सीएसएस में निम्नलिखित न हों:

white-space: nowrap

यह एक पंक्ति को तोड़ने के लिए बाधित होने तक एक ही पंक्ति पर पाठ जारी रखने का कारण होगा।

ठीक है, मेरी क्षमा याचना, यदि बाद में मार्क-अप को संपादित या जोड़ा नहीं गया (इसे पहली बार नहीं देखा)।

ओवरफ्लो-एक्स प्रॉपर्टी वह है जो स्क्रॉल बार प्रदर्शित होने का कारण बनती है। उसे हटा दें और div आपके सभी पाठ को सम्‍मिलित करने के लिए उतने अधिक समायोजित हो जाएगा।

Comments

आप सही हे। ट्रीव्यू Microsoft द्वारा बनाया गया है और जब मैं स्रोत की जांच करता हूं, तो हर जगह सफेद-स्थान: नॉरैप का उपयोग किया जाता है

— Martijn

आह अच्छा। PhoneGap + jquery मोबाइल के माध्यम से सॉर्ट करने के लिए बहुत अधिक शैली में परिणाम होता है। "सफेद-स्थान: सामान्य; अतिप्रवाह: ऑटो;" जोड़कर मुझे सुलझा लिया गया।

— माइकल ब्लेंकशिप

white-space:normal;अपने तत्व पर प्रयास करें कि white-space: nowrapवह अपने माता

— गॉर्डन

Answer 2

या बस उपयोग करें

word-wrap: break-word;

IE 5.5+, फ़ायरफ़ॉक्स 3.5+ और क्रोम और सफारी जैसे WebKit ब्राउज़र में समर्थित है।

Answer 3

प्रयास करें white-space:normal;यह वंशानुक्रम को ओवरराइड करेगाwhite-space:nowrap;

Answer 4

यह कहना बहुत मुश्किल है कि यह देखने के बिना कि html कैसा दिखता है और ट्रीव्यू डिव के भीतर तत्वों को किस शैली में लागू किया जा रहा है, लेकिन अभी मेरे पास जो चीज है, वह सही नहीं है

overflow-x: scroll;

यदि आप उसे हटा देते हैं तो क्या होता है?

Comments

फिर पाठ सीमा रेखा पर चला जाता है

— Martijn

Answer 5

आप उपयोग कर सकते हैं:

overflow-x: auto; 

यदि आप 'ऑटो' को ओवरफ्लो-एक्स में सेट करते हैं, तो स्क्रॉल केवल तब दिखाई देगा जब आंतरिक आकार सबसे बड़ा है जो कि डीआईवी क्षेत्र है

Answer 6

मैं थोड़ा आश्चर्यचकित हूं कि यह सिर्फ ऐसा नहीं करता है। क्या div के अंदर एक और तत्व हो सकता है जिसकी चौड़ाई 250 से अधिक हो?

Answer 7

बस चौड़ाई और फ्लोट सीएसएस गुणों को सेट करने से एक रैपिंग पैनल मिलेगा। फलस्वरूप उदाहरण ठीक काम करते हैं:

<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

हो सकता है कि उपस्थिति को संशोधित करने वाली अन्य शैलियाँ हों?

Comments

यह काम नहीं करता है। मेरे div में मैं हाइपरलिंक का उपयोग करें। शायद उसका इस से कोई सम्बंध हो?

— Martijn

Answer 8

मैंने पाया कि word-wrap: anywhereकाम किया (जैसा कि word-wrap: break-wordदूसरे उत्तर में उल्लेखित है)।

यह सभी देखें:

"वर्ड-रैप" सीएसएस संपत्ति में "कहीं भी" का क्या अर्थ है?