किसी भी रिक्त को लपेटे बिना मैं एक लंबी स्ट्रिंग को कैसे बाध्य कर सकता हूं?

Question

मेरे पास एक लंबी स्ट्रिंग (एक डीएनए अनुक्रम) है। इसमें कोई व्हाट्सएप कैरेक्टर नहीं है।

उदाहरण के लिए:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

क्या CSS चयनकर्ता मजबूर करने के लिए इस पाठ एक में लपेटा जा करने के लिए किया जाएगा html:textareaया एक में xul:textbox?

Comments

विडंबना यह है कि स्टैक ओवरफ्लो में या तो स्ट्रिंग नहीं

— टूटती है

Answer 1

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

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

इनलाइन तत्वों के लिए:

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

Comments

यह केवल IE, सफारी और FF3.1 (अल्फा) में समर्थित है।

— एडम बेलाएरे

यह केवल ब्राउज़रों की नई लहर में काम करता है - caniuse.com/#search=word-break

— मीकल बर्नहार्ड

@ मिचेल: उत्तर "वर्ड-रैप" नियम का उपयोग करता है, न कि "वर्ड-ब्रेक"; पूर्व समर्थित है जैसा कि आज उपयोग किए जाने वाले लगभग हर ब्राउज़र में किया जाता है। जहां "आंशिक समर्थन" इंगित किया गया है, ऐसा प्रतीत होता है कि "शब्द-आवरण" नियम के लिए "ब्रेक-वर्ड" मूल्य अभी भी व्यवहार्य है।

— रोबस्टा

संपत्ति का नाम बदलकर overflow-wrapमानकों में कर दिया गया , लेकिन wrod-wrapइसे व्यापक रूप से लागू किया गया।

— सिरो सेंटिल्ली 郝海东 冠状 i 事件 法轮功 ''

"डिस्प्ले: टेबल-सेल" के साथ भी काम करता है, मेरे मामले में बहुत अच्छा था

— सेसर लियोन

Answer 2

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

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Comments

अच्छा सुझाव, मैंने आज कुछ नया सीखा है, धन्यवाद!

— माटेओ कोंटा

इस समाधान के लिए धन्यवाद। एक मेज के अंदर काम करने के लिए इस तरह से कुछ कठिन समय हो रहा था, और यह समाधान केवल एक है जो मुझे IE, फ़ायरफ़ॉक्स और क्रोम में काम करता है।

— फ़रिना ha

+1, यह बेहतर काम करता है क्योंकि यह अधिक मामलों को कवर करता है, हालांकि प्रश्न अधिक विशेष मामले के लिए था।

— montrealist

आप वैकल्पिक रूप से <wbr>टैग का उपयोग कर सकते हैं , जो वैकल्पिक लाइन-ब्रेक अवसर प्रदान करने के समान उद्देश्य को पूरा करता है।

— justisb

देखो अगर तुम यह उन चीजों में करते हो जो कॉपी और पेस्ट की जा सकती हैं।

— एलेक्स

Answer 3

यहाँ कुछ बहुत उपयोगी उत्तर दिए गए हैं:

मेरे शब्द को तोड़ने से लंबे शब्दों को कैसे रोकें?

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

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;

Comments

+1 क्योंकि यह शब्द-विराम का उल्लेख करता है: ब्रेक-ऑल; जो मेरे लिए IE9 में काम किया

— निक बेनेडिक्ट

word-break: break-all;केवल वही था जो मेरे लिए Android WebView में काम करता था।

— स्टेन

आपके लिए धन्यवाद word-break: break-all;!

— लोनी बेस्ट

Answer 4

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

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

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

Comments

इसने मेरे लिए काम नहीं किया। मुझे "वर्ड-रैप" प्रॉपर्टी को डिव में बदलना है और "ओवरफ्लो" प्रॉपर्टी को हटाना है। इस बदलाव के साथ, काम करता है।

— डेनिगोनलिनिया

Answer 5

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

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

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

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

Comments

वाह, उस बारे में भी नहीं पता था। साफ!

— डैनियल शेफ़र

मुझे उसके बारे में पता नहीं था। डबल नीट!

— कार्ल

Answer 6

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

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

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) कम्पास से फोर्स-रैप मिक्सिन का उपयोग करें ।

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

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

संदर्भ: रैपिंग सामग्री

Comments

हां, # 3 सभी आधुनिक ब्राउज़रों और यहां तक ​​कि पुराने IE6 + में भी काम करता है।

— ग्रेक

# 3 केवल तभी काम करता है जब शब्दों द्वारा तोड़ने के अवसर हों। अधिक लम्बी स्ट्रिंग नहीं टूटती (Chrome 52.0.2743.82 पर परीक्षण किया गया)।

— collapsar

Answer 7

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

-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 8

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

Answer 9

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

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

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

यहां बताया गया है कि PHP वर्डवैप फ़ंक्शन कैसे काम करता है:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

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

Comments

आप शून्य-चौड़ाई वाले स्थानों को सम्मिलित करने के लिए रेमी के समाधान के साथ इस समाधान को मिला सकते हैं: वर्डवैप ($ longtext, 5, "& # 8203;", true);

— एम.वी.

Answer 10

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

Answer 11

<wbr>टैग का उपयोग करें :

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

मुझे लगता है कि यह शून्य-चौड़ाई वाले स्थान का उपयोग करने से बेहतर है ​जो पाठ को कॉपी करते समय समस्या पैदा कर सकता है।

Answer 12

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

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

Answer 13

बस सेटिंग widthऔर जोड़ना floatमेरे लिए काम किया :-)

width:100%;
float:left;

Comments

यह एक पूर्ण और आसान उत्तर है जो मुझे लगता है कि इस समस्या को पोस्ट करने वाले व्यक्ति को मूल रूप से चौड़ाई का उपयोग करना चाहिए: 100%; फ्लोट के साथ: बाएं; उस तत्व पर जिसमें उस स्ट्रिंग और उसकी समस्या को हल किया जाएगा। फिर यह उत्तर प्रासंगिक क्यों नहीं है?

— TechBrush.Org

क्योंकि उस व्यक्ति ने इस समस्या को पोस्ट किया है जो आपके समाधान को पांच साल पहले काम नहीं करता है।

— पियरे

हां, लेकिन यह मंच केवल उस आदमी के बारे में ही नहीं है, जो इस मंच के बारे में है और मेरे जैसे अन्य लोगों को आज भी इसी तरह की समस्या का सामना करना पड़ सकता है।

— TechBrush.Org