मैं पूर्व टैग में टेक्स्ट कैसे लपेट सकता हूं?

Question

pre टैग HTML में कोड ब्लॉक के लिए और स्क्रिप्ट लिखते समय आउटपुट डिबगिंग के लिए सुपर-उपयोगी हैं, लेकिन मैं एक लंबी लाइन को प्रिंट करने के बजाय टेक्स्ट वर्ड-रैप कैसे बना सकता हूं?

Answer 1

जवाब, सीएसएस में इस पृष्ठ से:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Comments

white-space:pre-line;(और सभी ब्राउज़र संगत जायके) कुछ मामलों में अधिक पर्याप्त लगते हैं (उदाहरण के लिए टैब के बिना) क्योंकि यह लाइन की शुरुआत में अंतरिक्ष को दूर ले जाता है (यदि कुछ हैं)

— MediaVince

@MediaVince, pre-lineसभी व्हाट्सएप को ध्वस्त कर देता है (न केवल लाइन की शुरुआत में)। developer.mozilla.org/en-US/docs/Web/CSS/white-space में white-spaceमानों के व्यवहार को सारांशित करने वाली एक तालिका है ।

— पॉल

word-wrap: break-wordसवाल क्या पूछ रहा है क्या नहीं करता है, यह शब्दों के बीच में भी लाइन रैप्स का कारण बनता है। आप उस लाइन को हटा सकते हैं। आधुनिक ब्राउज़रों पर, आपको किसी भी -mozअन्य उपसर्ग की आवश्यकता नहीं है।

— फ्लिम

Answer 2

यह पाठ को लपेटने और pre-tag के भीतर सफेद-स्थान बनाए रखने के लिए बहुत अच्छा काम करता है :

pre {
    white-space: pre-wrap;
}

Comments

ऐसा इसलिए है क्योंकि यह सीएसएस 3 केवल है - अधिक अनुकूलता के लिए एडबॉक्स से उत्तर देखें ।

— लोरेम बंदर

Answer 3

मैंने पाया है कि पूर्व टैग को छोड़ देना और श्वेत-स्थान का उपयोग करना: एक div पर पूर्व-आवरण एक बेहतर समाधान है।

 <div style="white-space: pre-wrap;">content</div>

Comments

लोकप्रिय उत्तर की तुलना में आसान। धन्यवाद!

— रिकी

मेरे मामले में मैं पूर्व स्वरूपित पाठ दिखाना चाहता था जिसमें कुछ तालिका बनाने के लिए टैब थे। मैंने आपके समाधान का उपयोग किया है I मैंने एक मोनस्पैस फॉन्ट जोड़ा है ताकि सभी कॉलम संरेखित हो जाएं:style="white-space: pre-wrap; font-family:monospace;"

— Jan

हालांकि यह आसान हो सकता है, <pre>कोड ब्लॉक का उपयोग करने में अधिक अर्थ मूल्य हो सकता है ।

— एंजेलोस चालारिस

मुझे पता है कि मुझे इस खेल में देर हो गई है, लेकिन स्टाइलशीट में एक बार सेट करने से बेहतर यह समाधान क्यों है? मेरे पास एक HTML आउटपुट स्क्रीन पर कई divs हैं जिन्हें इसकी आवश्यकता होगी। स्टाइलशीट में तत्व के लिए एक एकल फिक्स की तरह लगता है सभी समस्याओं को हल करता है।

— वेबफ्रॉग्स

@webfrogs हां, .prewrap क्लास बनाना सबसे अच्छा होगा।

— मेसन २४०

Answer 4

सबसे बढ़कर, यह सामग्री बिना शब्दों को तोड़े "पूर्व" टैग के अंदर लपेटने के लिए मजबूर करती है। चीयर्स!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

लाइव उदाहरण देखें यहाँ ।

Answer 5

यह वही है जो मुझे चाहिए था। इसने शब्दों को तोड़ने से रखा लेकिन पूर्व क्षेत्र में गतिशील चौड़ाई के लिए अनुमति दी।

word-break: keep-all;

Answer 6

मेरा सुझाव है कि पूर्व को भूल जाओ और इसे केवल एक textarea में रखो।

आपका इंडेंटिंग बना रहेगा और आपका कोड किसी रास्ते या किसी चीज़ के बीच में लिपटा हुआ नहीं मिलेगा।

यदि आप क्लिपबोर्ड पर कॉपी करना चाहते हैं तो टेक्स्ट क्षेत्र में टेक्स्ट रेंज का चयन करना आसान है।

निम्नलिखित एक php अंश है इसलिए यदि आपकी php में नहीं है तो आपके द्वारा html विशेष वर्णों को पैक करने का तरीका अलग-अलग होगा।

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

क्लिप में टेक्स्ट को कॉपी करने के तरीके के बारे में जानकारी के लिए देखें: मैं जावास्क्रिप्ट में क्लिपबोर्ड पर कैसे कॉपी कर सकता हूं? ।

तथापि...

मैंने अभी स्टैकओवरफ्लो कोड ब्लॉक का निरीक्षण किया और वे <कोड> टैग में लिपटे <c> सीएसएस के साथ टैग ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

इसके अलावा स्टैकओवरफ्लो कोड ब्लॉक की सामग्री का उपयोग करके वाक्यविन्यास हाइलाइट किया गया है (मुझे लगता है) http://code.google.com/p/google-code-prettify/ ।

यह एक अच्छा सेटअप है, लेकिन Im अभी के लिए textareas के साथ जा रहा है।

Comments

इनपुट के अलावा किसी अन्य क्षेत्र के लिए पाठ क्षेत्रों का उपयोग करना शब्दार्थिक रूप से गलत नहीं होगा? मेरे लिए एक अजीब समाधान की तरह लगता है।

— जोश एम।

एक "पूर्व" टैग के लिए फ़ॉर्मेटिंग शैलियों का एक गुच्छा जोड़ने के रूप में शब्दार्थिक रूप से गलत नहीं है जब "पूर्व" से पता चलता है कि निहित पाठ पूर्व-स्वरूपित है और इसलिए अतिरिक्त प्रारूपण की आवश्यकता नहीं है और इसे इस तरह लिया जाना चाहिए;) "कार्यात्मक" पर "शब्दार्थ" को प्राथमिकता दें।

— ekerner

मुझे नहीं लगता कि <pre>इसका कोई अर्थात्मक अर्थ है (विपरीत <code>), इसका सीधा सा मतलब है कि नए सिरे और कई स्थानों को संरक्षित किया जाना चाहिए।

— फ्लिम्स

"पूर्व स्वरूपित" के लिए इसकी कमी है। Youre का सुझाव है कि यह वास्तव में पूर्व स्वरूपित- newlines और एकाधिक-रिक्त स्थान के लिए छोटा है?

— एक्केनर

पूर्व-स्वरूपित पाठ के प्रकार के आधार पर सामग्री का प्रकार एक आंतरिक टैग द्वारा निर्दिष्ट किया जाना है। मैं अपने दोस्तों को w3c प्री-टैग विकी पेज पर भेजूंगा

— joshperry

Answer 7

मैंने @richelectron और @ user1433454 उत्तर जोड़े।
यह बहुत अच्छी तरह से काम करता है और पाठ स्वरूपण को संरक्षित करता है।

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Answer 8

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

pre { white-space: normal; }

मोनोपास फ़ॉन्ट को बनाए रखने के लिए, लेकिन शब्द-आवरण जोड़ें, या:

pre { overflow: auto; }

जो लंबी लाइनों के लिए क्षैतिज स्क्रॉल के साथ एक निश्चित आकार की अनुमति देगा।

Comments

ओह, अतिप्रवाह अनुस्मारक के लिए धन्यवाद! मोबाइल डिस्प्ले के लिए बढ़िया।

— XTL

Answer 9

प्रयोग करके देखें

<pre style="white-space:normal;">. 

या बेहतर सीएसएस फेंक देते हैं।

Comments

यह एक IE 7 में काम करने लगता है, लेकिन 6 नहीं। यह एकमात्र सुझाव है जो IE के लिए आशाजनक लग रहा था ... अन्य सभी सुझाव अन्य लोगों के लिए अच्छे थे ...

— topwik

कोई बात नहीं एक ब्राउज़र कैशिंग बात होनी चाहिए। IE 6 को पुनः आरंभ किया और सब ठीक है। खुश होती है।

— topwik

इस समाधान के साथ समस्या यह है कि यह न्यूलाइन वर्णों को भी भंग कर देगा ... जैसे, पैराग्राफ में पाठ के किसी भी अलगाव को खो दिया जाएगा।

— क्रिस डब्ल्यू।

Answer 10

एस के white-space: pre-wrapअंदर स्वचालित लाइन ब्रेकिंग के लिए उपयोग और कुछ उपसर्ग pre।

उपयोग न करें word-wrap: break-wordक्योंकि यह सिर्फ, निश्चित रूप से, आधे में एक शब्द को तोड़ता है जो शायद कुछ ऐसा है जो आप नहीं चाहते हैं।

Answer 11

मेरे लिए सबसे अच्छा क्रॉस ब्राउज़र तरीका लाइन ब्रेक पाने के लिए काम करता है और सटीक कोड या पाठ दिखाता है: (क्रोम, इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स)

सीएसएस:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

Comments

मेरे लिए बहुत अच्छा काम किया :-)

— Wesley Tuzza

HTML 3.2 से xmp को हटा दिया गया है, HTML5 से पूरी तरह से हटा दिया गया है, और इसके साथ शुरू करने के लिए कभी भी ठीक से काम नहीं किया गया है। यह विभिन्न ब्राउज़रों के बीच लगातार लागू नहीं किया गया था।

— पीटरटॉइथर्ड

सफेद-स्थान का उपयोग करना: पूर्व-लपेट; और शब्द-रैप: ब्रेक-वर्ड; मेरी css में, (json) स्निपेट्स का इंडेंटेशन रहता है, प्री लाइन इसे हटा देती है। (क्रोम)

— पीटर विसर

Answer 12

निम्नलिखित ने मेरी मदद की:

pre {
    white-space: normal;
    word-wrap: break-word;
}

धन्यवाद

Comments

मुझे लगता है कि इसका उपयोग करना बेहतर है white-space: pre-wrap;क्योंकि यह सफेद स्थानों का सम्मान करता है

— इवान फेरर विला

Answer 13

<pre>तत्व "पूर्व स्वरूपित पाठ" के लिए खड़ा है और उसके टैग के बीच पाठ (या जो भी) के स्वरूपण रखने के लिए करना है। इसलिए यह वास्तव में -टैग के भीतर स्वचालित वर्ड-रैपिंग या लाइन-ब्रेक होने का <pre>इरादा नहीं है

एक तत्व में पाठ एक निश्चित-चौड़ाई वाले फ़ॉन्ट (आमतौर पर कूरियर) में प्रदर्शित होता है, और यह रिक्त स्थान और रेखा विराम दोनों को संरक्षित करता है ।

source: w3schools.com , खुद के द्वारा किया गया जोर

Comments

यह सिर्फ इस तथ्य को बताता है, कि यह एक पूर्व-टैग के भीतर ऑटो-रैप टेक्स्ट के लिए संभव है, हालांकि यह ऑटो-रैप के पूर्व-टैग का इरादा नहीं है।

— लूट_

यह लेखक के प्रश्न का एकमात्र सही उत्तर है। कोई अन्य उत्तर या संभव "समाधान" <पूर्व> तत्व के दुरुपयोग को प्रोत्साहित करता है। अनिवार्य रूप से, यदि आप एक <pre> तत्व के अंदर टाइप करना चाहते हैं और इसे लपेटना चाहते हैं, तो इसके बजाय <p> टैग का उपयोग करें, और इसे किसी भी तरह से स्टाइल करें जिसे आप CSS क्लास के साथ पसंद करते हैं।

— मार्कस

मुझे यकीन नहीं है कि लोग इस तरह की "मैं आपसे ज्यादा चतुर हूं" सलाह देने में मददगार साबित होता हूं। नहीं, एक <p> टैग एक उपयुक्त प्रतिस्थापन नहीं है: यह न तो व्हाट्सएप को सुरक्षित रखता है और न ही लाइन को तोड़ता है। ए <प्री> टैग लाइन ब्रेक को संरक्षित करने के लिए उपयोगी है, लेकिन कभी-कभी अतिरिक्त रैपिंग को जोड़ना आवश्यक होता है, ठीक उसी तरह जैसे कोई भी कोड संपादक लाइन ब्रेक को संरक्षित कर सकता है और रैपिंग को लंबी लाइनों में जोड़ सकता है।

— dwk