सीएसएस: मैं एक्सयूएल और/या एचटीएमएल

Question

में लपेटने के लिए एक लंबी स्ट्रिंग (बिना किसी खाली के) को कैसे मजबूर कर सकता हूं मेरे पास एक लंबी स्ट्रिंग (एक डीएनए अनुक्रम) है। इसमें कोई सफेद जगह नहीं है। जैसे:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA 

क्या सीएसएस चयनकर्ता इस पाठ के लिए मजबूर होगा एक html में लिपटे होने के लिए: पाठ क्षेत्र या एक xul में: पाठ बॉक्स

Answer 1

ब्लॉक तत्वों के लिए

<textarea style="width:100px; word-wrap:break-word;"> 
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
</textarea> 

इनलाइन के लिए

तत्व

<span style="width:100px; word-wrap:break-word; display:inline-block;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span> 

Answer 2

मुझे नहीं लगता कि आप इसे सीएसएस के साथ कर सकते हैं। इसके बजाय, नियमित रूप से 'शब्द लंबाई' स्ट्रिंग साथ में, एक HTML नरम हायफ़न सम्मिलित करें:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG 

इस लाइन, जहां यह लपेटता के अंत में एक हाइफन प्रदर्शित करेगा, जो या नहीं हो सकता है कि तुम क्या चाहते हैं।

नोट सफारी फ़ायरफ़ॉक्स के विपरीत, <textarea> में लंबी स्ट्रिंग को लपेटने लगता है।

Answer 3

zero-width spaces उन स्थानों पर रखें जहां आप ब्रेक की अनुमति देना चाहते हैं। एचटीएमएल में शून्य-चौड़ाई वाली जगह ​ है। उदाहरण के लिए:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Answer 4

मेरे लिए यह काम करता है,

<td width="170px" style="word-wrap:break-word;"> 
    <div style="width:140px;overflow:auto"> 
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT 
    </div> 
</td> 

तुम भी td की बजाय किसी दूसरे div के अंदर एक div उपयोग कर सकते हैं। मैंने overflow:auto का उपयोग किया, क्योंकि यह मेरे ओपेरा और आईई ब्राउज़र दोनों में सभी टेक्स्ट दिखाता है।

Answer 5

word-wrap:break-word; के लिए मेरे लिए काम करने के लिए, मुझे यह सुनिश्चित करना था कि displayblock पर सेट किया गया था, और चौड़ाई तत्व पर सेट की गई थी। सफारी में, इसे p टैग होना था और width को ex में सेट करना था।

Answer 6

आप PHP का उपयोग कर रहे हैं तो WordWrap समारोह इस के लिए अच्छी तरह से काम करता है: http://php.net/manual/en/function.wordwrap.php

सीएसएस समाधान word-wrap: break-word; सभी ब्राउज़र में अनुरूप होना प्रतीत नहीं होता है।

अन्य सर्वर-साइड भाषाओं में समान कार्य होते हैं - या हाथ निर्मित किए जा सकते हैं।

यहाँ कैसे पीएचपी WordWrap समारोह काम करता है:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA"; 

$wrappedstring = wordwrap($string,50,"<br>",true); 

यह एक <br> टैग के साथ 50 अक्षरों में स्ट्रिंग गिर्द घूमती है। 'सत्य' पैरामीटर स्ट्रिंग को काटने के लिए मजबूर करता है।

Answer 7

कोई स्ट्रिंग लपेटने के लिए एक सीएसएस विधि का उपयोग करें जिसमें कोई सफेद-स्पेस न हो। तीन विधियां:

1) सीएसएस व्हाइट-स्पेस प्रॉपर्टी का उपयोग करें। ब्राउज़र असंगतताओं को कवर करने के लिए, आपको इसे कई तरीकों से घोषित करना होगा। तो बस अपनी looooong स्ट्रिंग कुछ ब्लॉक स्तर तत्व में डाल दें (उदा।

some_block_level_tag { 
    white-space: pre;   /* CSS 2.0 */ 
    white-space: pre-wrap;  /* CSS 2.1 */ 
    white-space: pre-line;  /* CSS 3.0 */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: -moz-pre-wrap; /* Mozilla */ 
    white-space: -hp-pre-wrap; /* HP Printers */ 
    word-wrap: break-word;  /* IE 5+ */ 
} 

2) force-wrap mixin from Compass का उपयोग करें:, div, पूर्व, पी) और उस तत्व निम्नलिखित सीएसएस दे।

3) मैं तो बस के रूप में भी अच्छी तरह से इस में देख रहा था और मुझे लगता है कि हो सकता है काम (लेकिन मैं) और अधिक पूरी तरह से ब्राउज़र समर्थन का परीक्षण करने की जरूरत है:

.break-me { 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
} 

संदर्भ: wrapping content

Answer 8

यहाँ कुछ बहुत हैं उपयोगी जवाब:

How to prevent long words from breaking my div?

आप समय बचाने के लिए, इस सीएसएस के साथ हल किया जा सकता है:

white-space: -moz-pre-wrap; /* Mozilla */ 
white-space: -hp-pre-wrap; /* HP printers */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: -pre-wrap; /* Opera 4-6 */ 
white-space: pre-wrap; /* CSS 2.1 */ 
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ 
word-wrap: break-word; /* IE */ 
word-break: break-all; 

Answer 9

सिर्फ width की स्थापना और float जोड़ने मेरे लिए काम किया :-)

width:100%; 
float:left; 

Answer 10

जाना सीएसएस के माध्यम से (जब वहाँ विशेष वर्ण सम्मिलित करने के लिए कोई उचित तरीका है) मेरी तरीका:

-ms-word-break: break-all; 
word-break: break-all; 
word-break: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
hyphens: auto; 

जैसा कि यहां मिला है: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ कुछ अतिरिक्त शोध के साथ वहां पाए गए।

Answer 11

$ स्ट्रिंग = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$ wrappedstring = html_entity_decode (wordwrap ($ string, 50, "<br>", सत्य)); यह सही कोड

Answer 12

<textarea style="width:100px; word-wrap:break-word;"> 
    place your text here 
</textarea> 

Answer 13

है एक मामले में जहां निश्चित आकार की मेज नहीं है, रेखा से नीचे मेरे लिए काम किया है:

style="width:110px; word-break: break-all;" 

Answer 14

उपयोग <wbr> टैग:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC 

मैं इस बारे में सोच शून्य-चौड़ाई वाली जगह ​ का उपयोग करने से बेहतर है जो टेक्स्ट कॉपी करते समय समस्याएं पैदा कर सकता है।