ब्राउज़र संगत शब्द लपेटें और सफेद स्थान: पूर्व?

Question

मुझे संरक्षित और लपेटने के लिए एक div के भीतर पाठ की आवश्यकता है। अब तक मुझे समाधान के साथ कठिन समय आ रहा है। सबसे अच्छा समाधान जो मैं खोजने में सक्षम हूं वह सभी ब्राउज़रों के लिए काम नहीं करता है।

क्रोम और आईई 6 + में निम्नलिखित कार्य, लेकिन फ़ायरफ़ॉक्स में पाठ लपेट नहीं रहा है।

white-space: pre; 
word-wrap: break-word; 

मैं पाया है कि जो भी कारण के लिए पाठ सफेद अंतरिक्ष के साथ फ़ायरफ़ॉक्स में लपेट नहीं करता है: पूर्व। और -मोज़-प्री-रैप फ़ायरफ़ॉक्स 3.5 (क्यों ??) में काम नहीं करता है, केवल प्री-रैप। लेकिन जब मैं सूची में प्री-रैप जोड़ता हूं, तो आईई 6 और 7 काम नहीं करते हैं। अधिक निराश।

कोड:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre; 
    word-wrap: break-word; 
} 

Answer 1

CSS3 के गुण हमेशा काम नहीं करते के रूप में हम उन्हें :) काम करना चाहते हैं। फिर भी, मुझे white-space:pre और word-wrap:break-word मिश्रण में एक बिंदु दिखाई नहीं देता है।

पूर्व पाठ को तब तक लपेट नहीं देगा जब तक <br /> टैग का सामना नहीं किया जाता है। दूसरा एक विपरीत करेगा: जब भी आवश्यक हो, शब्दों को तोड़ दें, यहां तक ​​कि एक शब्द के बीच में भी। वे संघर्ष में होने लगते हैं, और क्यों विभिन्न ब्राउज़रों इन गुणों के लिए अलग प्रतिक्रिया करने के लिए सबसे स्पष्ट जवाब है कि

• वे दो गुणों में से किसी का समर्थन
• बाद से वे संघर्ष में हैं, पूर्वता अपरिभाषित है या है प्रत्येक ब्राउज़र में अलग

(हालांकि मुझे यकीन नहीं है कि मैं वास्तव में यहां एक विशेषज्ञ नहीं हूं)।

मेरा सुझाव है कि आप this और this पर नज़र डालें और फिर निर्णय लें कि आपके विशेष मामले में क्या उपयोग किया जाना चाहिए।

[संपादित करें]

आप इस कोशिश करने के लिए (सभी ब्राउज़रों में काम करना चाहिए) चाहते हो सकता है:

white-space: -moz-pre-wrap; /* Firefox */ 
white-space: -pre-wrap; /* ancient Opera */ 
white-space: -o-pre-wrap; /* newer Opera */ 
white-space: pre-wrap; /* Chrome; W3C standard */ 
word-wrap: break-word; /* IE */ 

मैं इस परीक्षण नहीं किया, लेकिन मैं इसे आप के लिए चाल करना चाहिए विश्वास करते हैं।

Answer 2

मुझे पता है कि यह एक बहुत पुराना मुद्दा है, लेकिन चूंकि मैंने अभी इसमें भाग लिया है, मुझे जवाब देने का आग्रह है।

मेरे समाधान होगा:

उपयोग white-space: pre-wrap;, के रूप में यह लगभग white-space: pre; रूप में ही है बस लाइनब्रेक कहते हैं। (संदर्भ: http://www.quirksmode.org/css/whitespace.html)

तो मैं विशेष रूप से लक्षित होता या तो सशर्त टिप्पणियां (संदर्भ: http://www.quirksmode.org/css/condcom.html) के साथ पुराने यानी या ब्राउज़र विशिष्ट सीएसएस हैक्स के साथ (http://paulirish.com/2009/browser-specific-css-hacks/)।

दूसरी विधि के लिए एक उदाहरण:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* IE6 and below */ 
* html .introsub { white-space: pre } 

/* IE7 */ 
*:first-child+html .introsub { white-space: pre } 

इस रैप करने के लिए यह मजबूर करने के लिए पर्याप्त होगा।