HTML में '\ n' से लाइन ब्रेक

222

क्या HTML को ठीक से \nलाइन ब्रेक का इलाज करने का एक तरीका है ? या मुझे उन्हें बदलना होगा <br/>?

html

— stkvtflw
स्रोत

jsfiddle.net/zawyatzt/2

— एसएस

355

यह html में नई लाइन और रिटर्न कैरिज दिखाने के लिए है, तो आपको इसे स्पष्ट रूप से करने की आवश्यकता नहीं है। आप इसे सीएसएस में व्हाइट-स्पेस विशेषता प्री-लाइन मान सेट करके कर सकते हैं।

<span style="white-space: pre-line">@Model.CommentText</span>

— khakishoiab
स्रोत

13

यदि आप white-space: pre-wrapटैब स्थान भी बनाए रखना चाहते हैं तो आप इसका उपयोग कर सकते हैं।

— विजय शेगोकर

124

आप के लिए सीएसएस white-spaceसंपत्ति का उपयोग कर सकते हैं \n। आप टैब को भी संरक्षित कर सकते हैं \t।

लाइन ब्रेक के लिए \n:

white-space: pre-line;

लाइन ब्रेक \nऔर टैब के लिए \t:

white-space: pre-wrap;

कोड स्निपेट दिखाएं

document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';

document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';

#just-line-break {
  white-space: pre-line;
}

#line-break-and-tab {
  white-space: pre-wrap;
}

<div id="just-line-break"></div>

<br/>

<div id="line-break-and-tab"></div>

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

— Darlesson
स्रोत

यह एक लंबे समय के लिए उपलब्ध है और यह सभी प्रमुख ब्राउज़रों द्वारा समर्थित है ।

— डार्लसन

23

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

यदि आप पाठ क्षेत्र में एक नई पंक्ति सम्मिलित करना चाहते हैं, तो आप यह कोशिश कर सकते हैं: -


लाइन फीड और कैरिज वापसी

<textarea>Hello &#10;&#13;Stackoverflow</textarea>

आप <pre>---</pre>Preformatted text भी कर सकते हैं ।

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

या, आप <p>----</p>पैराग्राफ का उपयोग कर सकते हैं

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

नोट: यदि आप उपयोग करना चाहते हैं तो आपको \nसर्वर साइड भाषा का समर्थन करने के लिए Xampp या Apache जैसे सर्वर को स्थापित करने की आवश्यकता है

— Sampad
स्रोत

5

क्या आप कृपया अपने अंतिम नोट को विस्तृत कर सकते हैं? मुझे समझ नहीं आ रहा है कि आपको क्यों लगता है कि इसके लिए सर्वर साइड सपोर्ट की जरूरत है ...

— शैडो

यहाँ अंतिम वाक्य स्पष्ट रूप से गलत है, क्योंकि कई अन्य उत्तरों ने प्रदर्शन किया है। और यहां तक कि अगर यह मूल रूप से समर्थित नहीं था, तो आप इसे क्लाइंट-साइड जावास्क्रिप्ट के साथ आसानी से बदल सकते हैं।

— जॉन मोंटगोमरी

13

आप <pre>टैग का उपयोग कर सकते हैं

<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>

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

— जोहान ब्रान्नमार
स्रोत

12

आप <pre>टैग का उपयोग कर सकते हैं :

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>

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

— एहसान
स्रोत

5

उपयोग white-space: pre-lineकरने से आप बिना लाइन टूटे HTML का उपयोग करने के बिना ही टेक्स्ट को सीधे इनपुट कर सकते हैं\n

यदि आप innerTextकिसी गैर-पूर्व तत्व पर जावास्क्रिप्ट के माध्यम से तत्व की संपत्ति का उपयोग करते हैं उदाहरण के लिए <div>, \nमानों को <br>DOM में डिफ़ॉल्ट रूप से प्रतिस्थापित किया जाएगा

innerText: के \nसाथ बदल देता है<br>
innerHTML, textContent: स्टाइल के उपयोग की आवश्यकताwhite-space

यह इस बात पर निर्भर करता है कि आपके पाठ को कैसे लागू किया जाए, लेकिन कई विकल्प हैं

const node = document.createElement('div');
node.innerText = '\n Test \n One '

— Drenai
स्रोत

4

सरल और रैखिक:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>

— एलेसेंड्रो ओर्नानो
स्रोत

2

आपको अपनी लाइन ब्रेक की जगह पर विचार करना चाहिए <br/>। HTML में एक लाइन ब्रेक केवल आपके कोड में नई लाइन के लिए खड़ा होगा।

वैकल्पिक रूप से आप कुछ अन्य HTML मार्कअप का उपयोग कर सकते हैं जैसे पैराग्राफ में अपनी लाइनें रखना:

<p>Sample line</p>
<p>Another line</p>

या अन्य आवरण जैसे उदाहरण <div>sample</div>के लिए सीएसएस विशेषता:display: block :।

आप भी इस्तेमाल कर सकते हैं <pre>। यह preहोगा की सामग्री को HTML स्टाइल अनदेखा कर दिया गया है। दूसरे शब्दों में यह सामान्य html को सामान्य \nब्रेक्लाइन के साथ प्रदर्शित करेगा

— ल्यूक
स्रोत