<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
सीएसएस में लपेटने के लिए मुझे इस तरह का टेक्स्ट कैसे मिलता है?सीएसएस का उपयोग करके टेक्स्ट कैसे लपेटें?
ऐसा करने का प्रयास करें। , IE8, FF3.6 के लिए काम करता है क्रोम
<body>
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
</tr>
</table>
</body>
यह मेरे लिए काम नहीं कर रहा था, लेकिन नीचे @ स्टर्लिंग के जवाब ने काम किया। – Zarepheth
ने इसे myslef का परीक्षण किया और यह बहुत अच्छा काम करता है! मुझे लगता है कि यहां केवल "समस्या" है, यह है कि आपको कंटेनर का आकार मैन्युअल रूप से सेट करना होगा (इस उदाहरण में 100 पीएक्स) – ymz
यह भी काम करता है: .truncate { चौड़ाई: 250 पीएक्स; सफेद-स्थान: अब्रैप; अतिप्रवाह: छुपा; टेक्स्ट-ओवरफ़्लो: इलिप्सिस; } –
text-wrap के साथ, ब्राउज़र समर्थन अपेक्षाकृत कमजोर है (जैसा कि आप ड्राफ्ट स्पेक से अपेक्षा कर सकते हैं)।
आप यह सुनिश्चित करने के लिए कदम उठा रहे हैं कि डेटा में गैर-सफेद-स्थान के लंबे तार नहीं हैं।
"कुछ डिस्प्ले त्रुटि से बचने के लिए, कृपया लंबे शब्द इनपुट न करें।" क्या वाकई आपका जवाब है? – SandRock
@ सैंडरॉक - नहीं, यह नहीं है। यह इस उत्तर के आधा * का गलत वर्णन है। प्रश्न में डेटा, "गैर-सफेद-स्थान की लंबी स्ट्रिंग" होने पर "शब्द" नहीं था। "कदम उठाने" का अर्थ यह भी नहीं है कि "इनपुट न करें", हम नहीं जानते कि डेटा कहां से आ रहा है, इसका मतलब यह हो सकता है कि सैनिटी के लिए उपयोगकर्ता इनपुट का परीक्षण करना और अनुचित सामग्री के लिए त्रुटि संदेश प्रदर्शित करना। – Quentin
बेहतर विकल्प यदि आप उपयोगकर्ता इनपुट को नियंत्रित नहीं कर सकते हैं, तो यह सीएसएस संपत्ति, ओवरफ्लो स्थापित करना है: छुपा, इसलिए यदि स्ट्रिंग चौड़ाई से बेहतर है, तो यह डिज़ाइन को विकृत नहीं करेगा।
संपादित:
मैं इस सवाल का जवाब चाहते: "शब्द-रैप: तोड़-शब्द", और उन ब्राउज़रों कि यह समर्थन नहीं करते, उदाहरण के लिए, IE6 या IE7 के लिए के लिए, मैं अपने समाधान का प्रयोग करेंगे।
यदि आप इस विकल्प का उपयोग करने जा रहे हैं तो टेक्स्ट या ओवरफ़्लो वाले तत्व के लिए चौड़ाई निर्धारित करना सुनिश्चित करें: छिपे हुए ओवरफ्लो को छिपाएंगे, इसे लपेटें नहीं। – jay
आप लिखते हैं, तो "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" इस उत्पादन करेगा:
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
मैं गूगल पर एक जोड़े को अलग अलग वेबसाइटों से मेरे उदाहरण ले लिया है। मैंने इसे एफएफ 5.0, आईई 8.0, और क्रोम 10 पर परीक्षण किया है। यह उन सभी पर काम करता है।
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword"></td>
</tr>
</table>
मैंने "वर्ड-रैप: ब्रेक-वर्ड;" जोड़ा लेकिन न तो फ़ायरफ़ॉक्स में और न ही आईई में काम किया (मैंने केवल इन दोनों में परीक्षण किया) ... n जब मैंने आपके द्वारा सुझाए गए सभी विकल्प जोड़े .. यह काम किया ... धन्यवाद !!! – UID
मुझे "व्हाइट-स्पेस: -वेबकिट-प्री-रैप" जोड़ना पड़ा; काम करने के लिए क्रोम (और शायद सफारी) के नए संस्करण प्राप्त करने के लिए। – George
धन्यवाद, यह काम किया! बूटस्ट्रैप अपने आप पर कुछ कर रहा था, और कुछ भी मदद नहीं की। अंत में मेरे लिए सही समाधान। –
यह हर जगह काम करेगा।
<BODY>
<TABLE style="table-layout:fixed;">
<TR>
<TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD>
</TR>
</TABLE>
</BODY>
बहुत से लोग इस तरह के तत्वों को पूंजीकृत नहीं करते हैं, दोस्त। –
सीएसएस इतना जवाब नहीं है लेकिन इसे पकड़ने के लिए एक टेक्स्ट फ़ील्ड का उपयोग कर ... बस –
यूघ कह रहा है। इनपुट इनपुट करने के लिए इनपुट हैं। मैंने सोचा कि हम प्रस्तुतिकरण उद्देश्यों के लिए अर्थशास्त्र के बारे में झूठ बोलने में कामयाब रहे हैं। – Quentin