टेक्सैरिया से वर्ड रैप कैसे निकालें?

146

जब टेक्स्ट ओवरफ्लो होता है तो मेरा सिंपल टेक्स्टारिया एक हॉरिजॉन्टल बार नहीं दिखाता है। यह एक नई पंक्ति के लिए पाठ को लपेटता है। जब मैं टेक्स्ट ओवरफ्लो करता हूं तो मैं वर्डप्रैप कैसे निकालूं और हॉरिजॉन्टल बार प्रदर्शित करूं?

html  textarea  word-wrap 
— पतथर दिल
स्रोत
क्या आप HTML पर मतलब है? स्विंग? कुछ और?
— ksuralta
उस भ्रम से बचने के लिए HTML टैग जोड़ा गया है, लेकिन मैं केवल वर्तमान उत्तरों से अनुमान लगा रहा हूं।
— सर्जियो एकोस्टा

जवाबों:

142

Textareas को डिफ़ॉल्ट रूप से लपेटना नहीं चाहिए, लेकिन आप रैप को स्पष्ट रूप से अक्षम करने के लिए रैप = ​​"सॉफ्ट" सेट कर सकते हैं:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

संपादित करें: "रैप" विशेषता आधिकारिक तौर पर समर्थित नहीं है। मुझे यह जर्मन SELFHTML पृष्ठ (एक अंग्रेजी स्रोत यहाँ है ) से मिलता है जो IE 4.0 और नेटस्केप 2.0 का समर्थन करता है। मैंने इसे एफएफ 3.0.7 में भी परीक्षण किया जहां यह आवश्यकतानुसार काम करता है। यहां चीजें बदल गई हैं, SELFHTML अब विकी है और अंग्रेजी स्रोत लिंक मृत है।

EDIT2: यदि आप सुनिश्चित करना चाहते हैं कि हर ब्राउज़र इसका समर्थन करता है, तो आप रैप व्यवहार को बदलने के लिए CSS का उपयोग कर सकते हैं:

कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके, आप उसी प्रभाव को प्राप्त कर सकते हैं white-space: nowrap; overflow: auto;। इस प्रकार, लपेट विशेषता को पुराना माना जा सकता है।

से यहाँ (पाठ क्षेत्र के बारे में जानकारी के साथ एक उत्कृष्ट पेज प्रतीत हो रहा है)।

EDIT3: मुझे यकीन नहीं है कि जब यह बदल गया (टिप्पणियों के अनुसार, 2014 के आसपास रहा होगा), लेकिन wrapअब एक आधिकारिक HTML5 विशेषता है, w3schools देखें । इस मैच का जवाब बदल दिया।

— schnaader
स्रोत
9
फ़ायरफ़ॉक्स 3.6 में "रैप" विशेषता काम करती है, लेकिन मान्य HTML5 नहीं है। हालाँकि, सीएसएस समाधान काम नहीं करता है, जैसे कि "व्हाइट-स्पेस: नॉवरैप" को अनदेखा किया जाता है।
— क्लिंट पच
9
white-space: pre;(या pre-line/ pre-wrap) का wrap="off"मेरे लिए भी उतना ही प्रभाव white-space: nowrapथा (जबकि सम्मान नहीं था padding)
— फिल्फ़ेरो
5
@ClintPachl वास्तव में, wrapमान्य HTML5 है ... यह अब सेटिंग्स है "hard"और "soft"( रेफरी )
— Mottie
4
@Mottie HTML5 विनिर्देश के वर्तमान संस्करण को मोज़िला डॉक्स की तुलना में जोड़ना बेहतर होगा। यहाँ वर्तमान संस्करण के लिए लिंक है - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
— Piotr Dobrogost
2
wrap="off"यह अब IE और एज दोनों के लिए आवश्यक है, लेकिन अब वैध नहीं है!
— जूलस
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapअगर आप व्हॉट्सएप की परवाह नहीं करते हैं, तो भी काम करता है, लेकिन निश्चित रूप से आप नहीं चाहते हैं कि यदि आप कोड (या इंडेंटेड पैराग्राफ या किसी भी सामग्री के साथ काम कर रहे हैं जहां जानबूझकर कई स्थान हो सकते हैं) ... तो मैं पसंद करता हूं pre।

overflow-wrap: normal( word-wrapपुराने ब्राउज़रों में था ) की जरूरत है अगर कुछ माता-पिता ने उस सेटिंग को बदल दिया है; यह preसेट होने पर भी रैपिंग का कारण बन सकता है।

भी - वर्तमान में स्वीकार जवाब के विपरीत - textareas करते अक्सर डिफ़ॉल्ट रूप से लपेट दें। pre-wrapमेरे ब्राउज़र पर डिफ़ॉल्ट प्रतीत होता है।

— आंशिक रूप से बादल छाएंगे
स्रोत
18
FF 20 के साथ, आपको अभी भी html textarea टैग में "off" = रैप की आवश्यकता है! यह तकनीक ऐसी असंगत बकवास है।
— लॉरेंस डोल
3
+1 सीएसएस समाधान प्रदान करने के लिए और उस
— टेक्स्टारिस को
1
आह, 2001 से फ़ायरफ़ॉक्स पर एक सुविधा अनुरोध प्रतीत होता है, लेकिन देव एहसान अखगीरी द्वारा क्रोम व्यवहार के लिए कुछ हालिया (2014) सहायक टिप्पणियों के साथ: bugzilla.mozilla.org/show_bug.cgi?id=82711 । जाओ और इसे बढ़ाओ!
— सिरो सेंटिल्ली 郝海东 i iro i 法轮功 '
1
यह अब फ़ायरफ़ॉक्स (अरोरा चैनल, v36) में काम करता है - हरे रंग की बनावट को jsfiddle.net/mlhDevelopment/gvjy14xu देखें ।
— 19
2
व्यक्तिगत रूप से, मुझे लगता है कि इसे बदलना बेहतर है overflow-x: scrollके साथ overflow: auto। स्क्रॉल पट्टियाँ पाठ क्षेत्र में उपलब्ध टाइपिंग स्थान को कम करती हैं। इसके अलावा, IE11 ने आपके रास्ते से अनावश्यक रूप से एक ऊर्ध्वाधर स्क्रॉल बार प्रदान किया, लेकिन overflow: autoइसे ठीक कर दिया।
— सैम
19

निम्नलिखित सीएसएस आधारित समाधान मेरे लिए काम करता है:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>
— Galghamon
स्रोत
15

मुझे एक ही समय में यह सब काम करने के साथ एक textarea बनाने का एक तरीका मिला:

  • क्षैतिज स्क्रॉलबार के साथ
  • बहुस्तरीय पाठ का समर्थन
  • पाठ रैपिंग नहीं

यह अच्छी तरह से काम करता है:

  • क्रोम 15.0.874.120
  • फ़ायरफ़ॉक्स 7.0.1
  • ओपेरा 11.52 (1100)
  • सफारी 5.1 (7534.50)
  • IE 8.0.6001.18702

मुझे समझाएं कि मैं इसे कैसे प्राप्त करूं: मैं क्रोम इंस्पेक्टर एकीकृत उपकरण का उपयोग कर रहा था और मैंने CSS शैलियों पर मूल्यों को देखा, इसलिए मैं इन मूल्यों को सामान्य लोगों के बजाय आज़माता हूं ... परीक्षण और त्रुटियां तब तक जब तक मुझे यह कम से कम और यहां नहीं मिला। किसी के लिए भी है जो यह चाहता है।

CSS सेक्शन में मैंने सिर्फ क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी के लिए इसका उपयोग किया है:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

CSS सेक्शन में मैंने IE के लिए बस इसका उपयोग किया है:

textarea {
  overflow:scroll;
}

यह थोड़ा मुश्किल था, लेकिन सीएसएस है।

इस तरह से (एक्स) HTML टैग:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

और <head>अनुभाग के अंत में इस तरह एक जावास्क्रिप्ट:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

जावास्क्रिप्ट W3C वैध बनाने के लिए है XHTML 1.1 स्ट्रिक्ट पास करना, क्योंकि रैप विशेषता आधिकारिक नहीं है और इस प्रकार सीधे एक (x) HTML टैग नहीं हो सकता है, लेकिन अधिकांश ब्राउज़र इसे संभालते हैं, इसलिए पेज लोड करने के बाद यह विशेषता सेट करता है।

आशा है कि यह अधिक ब्राउज़रों और संस्करणों पर परीक्षण किया जा सकता है और किसी को इसे सुधारने में मदद कर सकता है और इसे सभी संस्करणों के लिए पूरी तरह से क्रॉस-ब्राउज़र बना सकता है।

— z666zz666z
स्रोत
4
+1 .wrap = 'off' वह जादू है जिसने FF 14.0.1 में ट्रिक किया ... धन्यवाद।
— शनीमल
जावास्क्रिप्ट सफारी 5.0.6 (अंतिम पीपीसी संस्करण) पर काम नहीं करता है, भले ही आप HTML में रैप = ​​"ऑफ" का उपयोग कर सकते हैं।
.wrap ने क्रोम का उपयोग करते हुए यह मेरे लिए क्या किया। मैंने इसे सीएसएस में नो-रैप के साथ भी इस्तेमाल किया।
— माइनएंडक्रॉफ्ट 12
लपेटें = 'बंद' बनाया IE अन्य ब्राउज़रों की तरह व्यवहार करते हैं।
— रैंड स्कलार्ड
4

यह प्रश्न textareaरैप को अक्षम करने के लिए सबसे लोकप्रिय है । हालांकि, अप्रैल 2017 तक मुझे लगता है कि IE 11 (11.0.9600) उपरोक्त सभी समाधानों के साथ वर्ड रैप को अक्षम नहीं करेगा ।

केवल समाधान जो IE 11 के लिए काम करता है wrap="off"। wrap="soft"और / या विभिन्न सीएसएस विशेषताओं को white-space: preबदलना पसंद करते हैं जहां IE 11 लपेटना चुनता है लेकिन यह अभी भी कहीं न कहीं लपेटता है। ध्यान दें कि मैंने संगतता दृश्य के साथ या उसके बिना यह परीक्षण किया है । IE 11 सुंदर HTML 5 संगत है, लेकिन इस मामले में नहीं।

इस प्रकार, उन रेखाओं को प्राप्त करने के लिए जो उनके व्हाट्सएप को बनाए रखते हैं और दाहिने हाथ की तरफ से मैं जा रहा हूं:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

लगता है कि यह क्रोम और फ़ायरफ़ॉक्स में भी काम करता है। मैं प्री-एचटीएमएल 5 के उपयोग का बचाव नहीं कर रहा हूं wrap="off", यह कहते हुए कि यह IE 11 के लिए आवश्यक लगता है।

— JonBrave
स्रोत
एक अच्छा, मेरा दिन बचाया! प्रोग्रामर को स्वीकार किए गए उत्तर से कोड का उपयोग करते हुए नई सुर्खियों में जोड़ने में नाकाम रहने के कारण मेरे सिर को तोड़ दिया गया था।
— तुम
1
इस IE बग को एज
— जूल
3

यदि आप जावास्क्रिप्ट का उपयोग कर सकते हैं, तो आज सबसे पोर्टेबल विकल्प हो सकता है (फ़ायरफ़ॉक्स 31, क्रोम 36 का परीक्षण किया गया):

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

ऐसा प्रतीत होता है कि कोई मानक, पोर्टेबल सीएसएस समाधान नहीं है:

इसके अलावा, यदि आप जावास्क्रिप्ट का उपयोग कर सकते हैं, तो आप एसीई संपादक का भी उपयोग कर सकते हैं:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

संभवतः ACE के साथ काम करता है क्योंकि यह textareaया तो उपयोग नहीं करता है जो कि अंडरस्क्राइब्ड / इनकोहराइज्ड रूप से लागू किया गया है, लेकिन निश्चित नहीं है कि यह उपयोग करता है या नहीं contenteditable।

— सिरो सेंटिल्ली 郝海东 郝海东 郝海东 郝海东 郝海东 郝海东
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.