जब टेक्स्ट ओवरफ्लो होता है तो मेरा सिंपल टेक्स्टारिया एक हॉरिजॉन्टल बार नहीं दिखाता है। यह एक नई पंक्ति के लिए पाठ को लपेटता है। जब मैं टेक्स्ट ओवरफ्लो करता हूं तो मैं वर्डप्रैप कैसे निकालूं और हॉरिजॉन्टल बार प्रदर्शित करूं?
जब टेक्स्ट ओवरफ्लो होता है तो मेरा सिंपल टेक्स्टारिया एक हॉरिजॉन्टल बार नहीं दिखाता है। यह एक नई पंक्ति के लिए पाठ को लपेटता है। जब मैं टेक्स्ट ओवरफ्लो करता हूं तो मैं वर्डप्रैप कैसे निकालूं और हॉरिजॉन्टल बार प्रदर्शित करूं?
जवाबों:
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 देखें । इस मैच का जवाब बदल दिया।
white-space: pre;
(या pre-line
/ pre-wrap
) का wrap="off"
मेरे लिए भी उतना ही प्रभाव white-space: nowrap
था (जबकि सम्मान नहीं था padding
)
wrap="off"
यह अब IE और एज दोनों के लिए आवश्यक है, लेकिन अब वैध नहीं है!
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrap
अगर आप व्हॉट्सएप की परवाह नहीं करते हैं, तो भी काम करता है, लेकिन निश्चित रूप से आप नहीं चाहते हैं कि यदि आप कोड (या इंडेंटेड पैराग्राफ या किसी भी सामग्री के साथ काम कर रहे हैं जहां जानबूझकर कई स्थान हो सकते हैं) ... तो मैं पसंद करता हूं pre
।
overflow-wrap: normal
( word-wrap
पुराने ब्राउज़रों में था ) की जरूरत है अगर कुछ माता-पिता ने उस सेटिंग को बदल दिया है; यह pre
सेट होने पर भी रैपिंग का कारण बन सकता है।
भी - वर्तमान में स्वीकार जवाब के विपरीत - textareas करते अक्सर डिफ़ॉल्ट रूप से लपेट दें। pre-wrap
मेरे ब्राउज़र पर डिफ़ॉल्ट प्रतीत होता है।
overflow-x: scroll
के साथ overflow: auto
। स्क्रॉल पट्टियाँ पाठ क्षेत्र में उपलब्ध टाइपिंग स्थान को कम करती हैं। इसके अलावा, IE11 ने आपके रास्ते से अनावश्यक रूप से एक ऊर्ध्वाधर स्क्रॉल बार प्रदान किया, लेकिन overflow: auto
इसे ठीक कर दिया।
निम्नलिखित सीएसएस आधारित समाधान मेरे लिए काम करता है:
<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>
मुझे एक ही समय में यह सब काम करने के साथ एक textarea बनाने का एक तरीका मिला:
यह अच्छी तरह से काम करता है:
मुझे समझाएं कि मैं इसे कैसे प्राप्त करूं: मैं क्रोम इंस्पेक्टर एकीकृत उपकरण का उपयोग कर रहा था और मैंने 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 टैग नहीं हो सकता है, लेकिन अधिकांश ब्राउज़र इसे संभालते हैं, इसलिए पेज लोड करने के बाद यह विशेषता सेट करता है।
आशा है कि यह अधिक ब्राउज़रों और संस्करणों पर परीक्षण किया जा सकता है और किसी को इसे सुधारने में मदद कर सकता है और इसे सभी संस्करणों के लिए पूरी तरह से क्रॉस-ब्राउज़र बना सकता है।
यह प्रश्न 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 के लिए आवश्यक लगता है।
यदि आप जावास्क्रिप्ट का उपयोग कर सकते हैं, तो आज सबसे पोर्टेबल विकल्प हो सकता है (फ़ायरफ़ॉक्स 31, क्रोम 36 का परीक्षण किया गया):
contenteditable="true"
http://jsfiddle.net/cirosantilli/eaxgesoq/
<style>
div#editor {
white-space: pre;
word-wrap: normal;
overflow-x: scroll;
}
<style>
<div contenteditable="true"></div>
ऐसा प्रतीत होता है कि कोई मानक, पोर्टेबल सीएसएस समाधान नहीं है:
wrap
विशेषता मानक नहीं है
white-space: pre;
फ़ायरफ़ॉक्स 31 के लिए काम नहीं करता है textarea
। फिडेल , ओपन फीचर रिक्वेस्ट ।
इसके अलावा, यदि आप जावास्क्रिप्ट का उपयोग कर सकते हैं, तो आप एसीई संपादक का भी उपयोग कर सकते हैं:
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
।