कोणीयज में संरक्षित रेखा विराम

Question

मैंने इस SO प्रश्न को देखा है ।

मेरे कोड का ng-bind="item.desc"उपयोग करने के बजाय {{item.desc}}क्योंकि मेरे पास ng-repeatपहले है।

तो मेरा कोड:

<div ng-repeat="item in items">
  {{item.description}}
</div>

आइटम विवरण में \nउन नईलाइनों के लिए है, जिनका प्रतिपादन नहीं किया गया है।

{{item.description}}आसानी से प्रदर्शित होने वाले न्यूलाइन्स को कैसे पता चल सकता है कि मेरे पास ng-repeatऊपर है?

Comments

इसे <pre> टैग में डालें?

— AET

आवरण के divसाथ स्टाइल करके style="white-space:pre-wrap;"।

— स्टिव्यू

@Stewie की टिप्पणी मेरे लिए पूरी तरह से काम करती है (AngularJS 1.2.18), यह स्पष्ट रूप से दिखाता है कि व्यक्तिगत तत्व को कैसे स्टाइल किया जाए (जैसा कि पिलाउ और पॉल वेबर के समाधान के विपरीत) और दूसरों के रूप में <पूर्व टैग की शैलियों को बदलने की कोई आवश्यकता नहीं है। का प्रस्ताव रखा।

— आंद्रे होल्जनर

आप सही हैं, मैंने मान लिया कि हर कोई जानता है कि बुनियादी सीएसएस का उपयोग कैसे करें और एक तत्व को एक वर्ग लागू करें। अगर स्टीवी ने अपनी टिप्पणी एक जवाब के रूप में पोस्ट की होती तो यह उनके लिए बेहतर होता। हालांकि ऐसा लगता है जैसे उसके पास पर्याप्त अंक हैं ...

— पॉल वेबर

मैं मानता हूं, @Stewie को निश्चित रूप से अपनी टिप्पणी को एक उत्तर के रूप में प्रस्तुत करना चाहिए था। इसने मेरे मुद्दे को पूरी तरह से ठीक कर दिया।

— CF_HoneyBadger

Answer 1

@ पिलाऊ के उत्तर के आधार पर - लेकिन एक सुधार के साथ कि स्वीकृत उत्तर भी नहीं है।

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

यह दिए गए अनुसार नई सीमाएँ और व्हाट्सएप का उपयोग करेगा, लेकिन सामग्री सीमाओं पर सामग्री को भी तोड़ देगा। व्हाइट-स्पेस प्रॉपर्टी के बारे में अधिक जानकारी यहाँ मिल सकती है:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

यदि आप नई कड़ियों पर विराम देना चाहते हैं, लेकिन पाठ से पहले कई स्थानों या सफेद स्थान को भी ध्वस्त कर सकते हैं (मूल ब्राउज़र व्यवहार के समान), तो आप उपयोग कर सकते हैं, जैसा कि @aaki ने सुझाव दिया है:

white-space: pre-line;

विभिन्न रेंडरिंग मोड्स की अच्छी तुलना: http://meyerweb.com/eric/css/tests/white-space.html

Comments

यहाँ IMO सबसे अच्छा समाधान है, क्योंकि यह पूर्व जैसे एक मोनो-स्पॉन्टेड फ़ॉन्ट को पुनर्स्थापित नहीं करता है।

— ट्रॉल्स लार्सन

पाठ से पहले सफेद-स्थान देखें, जिसे संरक्षित किया जाएगा।

— सिल्वर पलाडिन

जब से आप इसे लाए हैं, यह pre-lineपसंदीदा नहीं होगा ? यह उस तरह से करीब है जैसे HTML आमतौर पर अपने नोड्स के टेक्स्ट कंटेंट को पेश करता है और फिर भी नईलाइनों को संरक्षित करता है।

— आकि

हम्म ... आप सही हैं, प्री-लाइन बेहतर समाधान है, क्योंकि मुझे अब यकीन नहीं है कि मैं प्री-लाइन के बजाय प्री-रैप क्यों चुन रहा हूं। शायद प्री-लाइन के लिए ब्राउज़र का समर्थन उतना अच्छा नहीं है? लेकिन मैं इसे जवाब में जोड़ दूंगा ... यहाँ रेंडरिंग की तुलना है: meyerweb.com/eric/css/tests/white-space.html

— पॉल वेबर

यह स्वीकृत उत्तर होना चाहिए! pre-lineजाने का रास्ता है। धन्यवाद पॉल!

— demisx

Answer 2

प्रयत्न:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

<pre>आवरण के साथ पाठ प्रिंट होगा \nपाठ के रूप में

अगर आप जौनर प्रिंट करते हैं, तो बेहतर लुक के लिए jsonफ़िल्टर का उपयोग करें , जैसे:

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

---

Demo

मैं इस बात से सहमत हूं @Paul Weberकि white-space: pre-wrap;बेहतर तरीका है, वैसे भी <pre>- किसी भी सामान को डिबग करने का त्वरित तरीका (यदि आप स्टाइल के लिए समय बर्बाद नहीं करना चाहते हैं)

Comments

आइटम.डिस्क्रिप्शन वह पाठ होता है जिसमें उन \nक्षेत्रों में होता है जिन्हें मैं नहीं जानता, अंत में नहीं। मुझे लगता है कि मुझे preआपके संपादन के आधार पर जरूरत है ।

— डायरोल

बहुत बार, एक <pre> टैग एक अच्छा समाधान नहीं है क्योंकि यह पाठ को कूरियर में बदल देता है और पृष्ठ की शैली को तोड़ देता है। शैली = "श्वेत-स्थान: पूर्व-आवरण;" समाधान एक बेहतर समाधान लगता है (कम से कम मेरी स्थिति के लिए)

— CF_HoneyBadger

@CF_HoneyBadger अच्छी तरह से, क्योंकि आप @pilauका जवाब उचित है, लेकिन इसका मतलब यह नहीं है कि मेरा गलत है और इसलिए मैं

— नीचा दिखा दिया

मैंने सभी \nके ओवर को बदलने की कोशिश की <br/>और फिर निश्चित रूप से इन टैगों को HTML मार्कअप के रूप में प्रस्तुत नहीं किया जा रहा था ... इन सभी के बाद आपके styleसमाधान का पता चला और यह एक अविश्वसनीय मदद और सरलीकरण है ... अब मैं नहीं करता मेरे सभी बैकएंड डेटा के चारों ओर परिवर्तित होते रहना है और बस व्यू में कुछ बदलाव करना है ... आप +1000 के लायक हैं!

— ट्विनकैब

यह कोड के लिए काम करता है, लेकिन उदाहरण के लिए उपयोगकर्ताओं को संदेश दिखाने के लिए नहीं। मुझे लगता है कि पॉल का जवाब सही है

— क्विंटन

Answer 3

यह सीएसएस के साथ इतना सरल है (यह काम करता है, मैं कसम खाता हूं)।

.angular-with-newlines {
  white-space: pre;
}

• देखो मा! कोई अतिरिक्त HTML टैग नहीं!

Comments

@ पिलाऊ मैं पाठ को लपेटना चाहता हूं यदि इसमें अल्पविराम (,) नहीं है, तो मैं कैसे कर सकता हूं?

— शीलेंद्र मद्दा

@ शीलेंद्र मेरा समाधान पाठ को लपेटता नहीं है, यह ऐसा व्यवहार करता है जैसे कि यह एक preटैग में था। शायद एक और सवाल खुला? या शायद मैं आपकी बात से चूक गया?

— पिलाऊ

मैं ब्राउजर कम्पैटिबिलिटी के बारे में सोच रहा था। इस चार्ट के अनुसार, यह सभी प्रमुख ब्राउज़रों में काम करने लगता है। यह br टैग के साथ newlines की जगह एक बहुत कम परेशानी है। धन्यवाद! बस कोड को प्रारूपित करने पर ध्यान दें ताकि इसमें कोई स्थान न हो, वे निश्चित रूप से दिखाई देंगे। developer.mozilla.org/en-US/docs/Web/CSS/white-space

— पॉल वेबर

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

— पॉल वेबर

Answer 4

CSS से इसे आसानी से हासिल किया जा सकता है।

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

या इस उद्देश्य के लिए एक CSS क्लास बनाई जा सकती है और बाहरी CSS फ़ाइल से इसका उपयोग किया जा सकता है

Answer 5

खैर यह निर्भर करता है, अगर आप बाँध datas करना चाहते हैं, वहाँ किसी भी उस में स्वरूपण नहीं होना चाहिए, नहीं तो आप कर सकते हैं bind-htmlऔर कर description.replace(/\\n/g, '<br>') नहीं यकीन है कि यह क्या तुम हालांकि चाहते हैं।

Answer 6

सीएसएस समाधान काम करता है, हालांकि आपको वास्तव में स्टाइल पर नियंत्रण नहीं मिलता है। मेरे मामले में मैं लाइन ब्रेक के बाद थोड़ी और जगह चाहता था। यहाँ एक निर्देश है जो मैंने इसे बनाने के लिए बनाया है (टाइपस्क्रिप्ट):

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

उपयोग:

<div class="pre">{{item.description}}</div>

यह सब करता है पाठ के प्रत्येक भाग को एक <p>टैग में लपेटता है । उसके बाद आप इसे अपनी इच्छानुसार स्टाइल कर सकते हैं।

Answer 7

बस इसे अपनी शैलियों में जोड़ें, यह मेरे लिए काम करता है

white-space: pre-wrap

इस पाठ के द्वारा <textarea>इसमें स्पेस और लाइन ब्रेक के साथ प्रदर्शित किया जा सकता है

एचटीएमएल

   <p class="text-style">{{product?.description}}</p>

सीएसएस

.text-style{
    white-space: pre-wrap
}

Answer 8

हां, मैं या तो <pre>टैग का उपयोग करूंगा या ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (यदि आप 1.2+ उपयोग कर रहे हैं तो ng-bind-html का उपयोग करें) का उपयोग .replace()करने के बाद परिवर्तन /nकरने के लिए<br />

Comments

ng-bind-html-unsafeपदावनत किया जाता है

— बजे मैक्सिम शाओतिन

Answer 9

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

Answer 10

मुझे आपसे भी ऐसी ही समस्या थी। मैं यहाँ अन्य उत्तरों के लिए उत्सुक नहीं हूँ क्योंकि वे वास्तव में आपको बहुत आसानी से न्यूलाइन व्यवहार करने की अनुमति नहीं देते हैं। मुझे यकीन नहीं है कि आपके पास मूल डेटा पर नियंत्रण है, लेकिन मैंने जो समाधान अपनाया था वह "आइटम" को स्ट्रिंग के एक सरणी से एरे के सरणी के रूप में बदलने के लिए था, जहां दूसरे सरणी में प्रत्येक आइटम में पाठ की एक पंक्ति थी । इस तरह आप कुछ कर सकते हैं:

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

इस तरह आप पैराग्राफ में कक्षाएं लगा सकते हैं और उन्हें सीएसएस के साथ अच्छी तरह से स्टाइल कर सकते हैं।