इनपुट प्रकार के अंदर पाठ लपेटना = "पाठ" तत्व एचटीएमएल / सीएसएस

Question 1

नीचे दिखाया गया HTML,

<input type="text"/>

ब्राउज़र में ऐसा प्रदर्शित किया जाता है:
यह एक ब्राउज़र में उपरोक्त HTML कैसे प्रदर्शित किया जाता है।

जब मैं निम्नलिखित पाठ जोड़ता हूं,

फुर्तीली भूरी लोमड़ी आलसी कुत्ते के उपर से कूद गई।

नीचे दिए गए HTML का उपयोग करते हुए,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

यह ब्राउज़र में ऐसा प्रदर्शित होता है:
यह एक ब्राउज़र में उपरोक्त HTML कैसे प्रदर्शित किया जाता है।

लेकिन मैं चाहूंगा कि इसे किसी ब्राउज़र में प्रदर्शित किया जाए:
यह है कि मैं कैसे उपरोक्त HTML को एक ब्राउज़र में प्रदर्शित करना चाहूंगा।

मैं चाहता हूं कि मेरे इनपुट तत्व में पाठ लपेटा जाए। क्या यह बिना किसी बनावट के पूरा किया जा सकता है?

Question 2

यह textareaमल्टीलाइन टेक्स्ट इनपुट के लिए काम है। ऐसा input नहीं होगा ; यह करने के लिए डिज़ाइन नहीं किया गया था।

तो एक का उपयोग करें textarea। उनके दृश्य अंतर के अलावा, उन्हें उसी तरह जावास्क्रिप्ट के माध्यम से एक्सेस किया जाता है ( valueसंपत्ति का उपयोग करें )।

आप inputघटना के माध्यम से और बस एक का उपयोग करके दर्ज की जा रही newlines को रोक सकते हैं replace(/\n/g, '')।

Question 3

वर्ड ब्रेक इरादे के कुछ नकल करेंगे

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }

<input type="text" value="The quick brown fox jumped over the lazy dog" />

स्निपेट का विस्तार करें

एक समाधान के रूप में, इस समाधान ने कुछ ब्राउज़रों पर अपनी प्रभावशीलता खो दी। कृपया डेमो देखें: http://cssdesk.com/dbCSQ

Question 4

आप इसके लिए इनपुट का उपयोग नहीं कर सकते हैं , आपको इसके बजाय textarea का उपयोग करने की आवश्यकता है। wrap="soft"कोड के साथ textarea का उपयोग करें और इस तरह के बाकी विशेषताओं को वैकल्पिक करें:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

विशेषताएँ: इसमें पाठ की मात्रा को उदाहरण के लिए "40" वर्णों तक सीमित करने के लिए आप maxlength="40"इस तरह की विशेषता जोड़ सकते हैं : <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> इसके लिए शैली को छिपाने के लिए। अगर आप केवल का उपयोग overflow:scroll;या overflow:hidden;या overflow:auto;यह केवल एक स्क्रॉल पट्टी के लिए प्रभावित कर ले जाएगा। यदि आप प्रत्येक स्क्रॉल बार के लिए अलग-अलग विशेषताएँ चाहते हैं, तो overflow:scroll; overflow-x:auto; overflow-y:hidden;शैली क्षेत्र में इस तरह की विशेषताओं का उपयोग करें : बनावट को पुन: प्रयोज्य नहीं बनाने के लिए आप resize:none;इस तरह से शैली का उपयोग कर सकते हैं :

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

इस तरह से आपके पास 14 पंक्तियों और 10 कॉल के साथ एक टेक्स्टारिया हो सकता है या वर्ड रैप और "40" वर्णों की अधिकतम वर्ण लंबाई है जो बिल्कुल एक इनपुट टेक्स्ट बॉक्स की तरह काम करता है लेकिन इनपुट टेक्स्ट का उपयोग किए बिना और इसके बिना पंक्तियों के साथ।

नोट: textarea इनपुट के विपरीत पंक्तियों के साथ काम करता है <input type="text" name="tbox" size="10"></input>जो कि उन पंक्तियों के साथ काम नहीं करने के लिए बना है ।

Question 5

एक पाठ इनपुट बनाने के लिए जिसमें हुड के नीचे का मूल्य एक एकल पंक्ति स्ट्रिंग है, लेकिन उपयोगकर्ता को एक शब्द-लिपटे प्रारूप में प्रस्तुत किया जाता है, आप एक या अन्य तत्व पर सामग्रीयुक्त विशेषता का उपयोग कर सकते हैं <div>:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}

<div contenteditable></div>

स्निपेट का विस्तार करें