รักษาตัวแบ่งบรรทัดในเชิงมุม

ฉันได้เห็นนี้คำถาม SO

รหัสของฉันแทนที่จะng-bind="item.desc"ใช้{{item.desc}}เพราะฉันมีng-repeatมาก่อน

ดังนั้นรหัสของฉัน:

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

คำอธิบายรายการมี\nการขึ้นบรรทัดใหม่ซึ่งไม่ได้แสดงผล

การ{{item.description}}แสดงขึ้นบรรทัดใหม่สามารถอนุมานได้อย่างง่ายดายว่าฉันมีng-repeatข้างต้นอย่างไร

ตามคำตอบของ @pilau - แต่ด้วยการปรับปรุงที่แม้แต่คำตอบที่ยอมรับก็ไม่มี

<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

ลอง:

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

<pre>เสื้อคลุมจะพิมพ์ข้อความที่มี\nเป็นข้อความ

นอกจากนี้ถ้าคุณพิมพ์ json สำหรับjsonตัวกรองการใช้ look look เช่น:

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

Demo

ผมเห็นด้วยกับ@Paul Weberว่าwhite-space: pre-wrap;เป็นวิธีการที่ดีกว่านะใช้<pre>- วิธีที่รวดเร็วในการแก้ปัญหาส่วนใหญ่สำหรับสิ่งบางอย่าง (ถ้าคุณไม่ต้องการที่จะเสียเวลาในการจัดแต่งทรงผม)

มันง่ายมากกับ CSS (ใช้งานได้ฉันสาบาน)

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

• ดูสิ! ไม่มีแท็ก HTML เพิ่มเติม!

ด้วย CSS สิ่งนี้สามารถบรรลุได้อย่างง่ายดาย

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

หรือสามารถสร้างคลาส CSS เพื่อจุดประสงค์นี้และสามารถใช้จากไฟล์ CSS ภายนอก

มันขึ้นอยู่กับว่าถ้าคุณต้องการผูกข้อมูลไม่ควรมีการจัดรูปแบบใด ๆ มิฉะนั้นคุณสามารถbind-htmlทำได้และdescription.replace(/\\n/g, '<br>') ไม่แน่ใจว่าเป็นสิ่งที่คุณต้องการ

โซลูชัน css ใช้งานได้ แต่คุณไม่สามารถควบคุมการออกแบบได้ ในกรณีของฉันฉันต้องการพื้นที่เพิ่มอีกเล็กน้อยหลังจากแบ่งบรรทัด นี่เป็นคำสั่งที่ฉันสร้างขึ้นเพื่อจัดการกับสิ่งนี้ (typescript):

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>แท็ก หลังจากนั้นคุณสามารถจัดสไตล์ได้ตามที่คุณต้องการ

เพียงเพิ่มสิ่งนี้ลงในสไตล์ของคุณมันใช้งานได้สำหรับฉัน

white-space: pre-wrap

โดยข้อความนี้<textarea>สามารถแสดงผลตามที่มีอยู่ในนั้นมีช่องว่างและเบรกบรรทัด

HTML

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

CSS

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

ใช่ฉันจะใช้<pre>แท็กหรือใช้ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (ใช้ ng-bind-html ถ้าคุณใช้ 1.2+) หลังจากใช้.replace()เพื่อ เปลี่ยน/nเป็น<br />

เพียงใช้รูปแบบ css "white-space: pre-wrap" และคุณน่าจะไปได้ดี ฉันมีปัญหาเดียวกันกับที่ฉันต้องจัดการกับข้อความแสดงข้อผิดพลาดที่มีการแบ่งบรรทัดและช่องว่างสีขาวโดยเฉพาะอย่างยิ่งจริงๆ ฉันเพิ่งเพิ่มอินไลน์นี้เมื่อฉันผูกข้อมูลและมันทำงานได้เหมือนชาร์ม!

ฉันมีปัญหาคล้ายกับคุณ ฉันไม่ชอบคำตอบอื่น ๆ ที่นี่เพราะพวกเขาไม่อนุญาตให้คุณกำหนดลักษณะการทำงานของบรรทัดใหม่ได้อย่างง่ายดาย ฉันไม่แน่ใจว่าคุณสามารถควบคุมข้อมูลต้นฉบับได้หรือไม่ แต่โซลูชันที่ฉันนำมาใช้คือการสลับ "รายการ" จากการเป็นอาร์เรย์ของสตริงเป็นอาร์เรย์ของอาร์เรย์โดยที่แต่ละรายการในอาร์เรย์ที่สองมีบรรทัดข้อความ . ด้วยวิธีนี้คุณสามารถทำสิ่งที่ชอบ:

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

วิธีนี้คุณสามารถใช้คลาสกับย่อหน้าและกำหนดสไตล์ให้กับ CSS ได้อย่างดี