কৌণিকরেখা লাইন বিরতি সংরক্ষণ করুন

Question

আমি এই তাই প্রশ্ন দেখেছি ।

আমার কোডগুলি ng-bind="item.desc"ব্যবহারের পরিবর্তে {{item.desc}}কারণ আমার একটি ng-repeatআগে রয়েছে।

সুতরাং আমার কোড:

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

আইটেমের \nবিবরণটিতে নতুন লাইনের জন্য রয়েছে যা রেন্ডার হয় না।

{{item.description}}আমার ng-repeatউপরের কথাগুলি কীভাবে নিউজলাইনগুলি সহজেই ধরে নিতে পারে ?

Comments

এটি একটি <পূর্ব> ট্যাগে রাখবেন?

— এট

মোড়কের styling দ্বারা divসঙ্গে style="white-space:pre-wrap;"।

— স্টিওই

@ স্টিভির মন্তব্য আমার পক্ষে নিখুঁতভাবে কাজ করে (অ্যাঙ্গুলার জেএস ১.২.১৮), এটি স্পষ্টভাবে দেখায় যে কীভাবে পৃথক উপাদানকে স্টাইল করা যায় (পিলাউ এবং পল ওয়েবারের সমাধানের বিপরীতে) এবং অন্যদের মতো <পছন্দ> ট্যাগের শৈলীর পরিবর্তন করার প্রয়োজন নেই প্রস্তাব দেয়।

— আন্দ্রে হল্জনার

আপনি ঠিক বলেছেন, আমি ধরে নিয়েছি যে বেসিক সিএসএস কীভাবে ব্যবহার করতে হয় এবং কোনও উপাদানকে ক্লাস প্রয়োগ করতে হয় তা সবাই জানে। স্টিভি যদি উত্তর হিসাবে তার মন্তব্য পোস্ট করেন তবে এটি তার পক্ষে আরও ভাল হত। যদিও মনে হচ্ছে তার যথেষ্ট পয়েন্ট রয়েছে ...

— পল ওয়েবার

আমি সম্মত, @ স্টিভির অবশ্যই উত্তর হিসাবে তার মন্তব্যটি ফর্ম্যাট করা উচিত ছিল। এটি আমার সমস্যাটিকে পুরোপুরি ঠিক করেছে।

— সিএফ_হনি ব্যাডার

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

আপনি যদি নতুন লাইনগুলি ভাঙতে চান তবে পাঠ্যের আগে একাধিক স্পেস বা সাদা স্থান ধসে পড়ে (মূল ব্রাউজারের আচরণের সাথে খুব মিল), আপনি @ আকি যেমন পরামর্শ দিয়েছেন:

white-space: pre-line;

বিভিন্ন রেন্ডারিং মোডগুলির সাথে তুলনা ভাল: http://meyerweb.com/eric/css/tests/ white-space.html

Comments

এখানে সেরা সমাধান আইএমও, কারণ এটি পূর্বের মতো মনো-ফাঁক ফন্টের জন্য পুনরায় সাজায় না।

— ট্রয়লস লারসেন

পাঠ্যের আগের সাদা স্থানটি দেখুন, এটি সংরক্ষণ করা হবে।

— রৌপ্য পালাদিন

আপনি যেহেতু এটি এনেছেন সেটি pre-lineপছন্দসই নয় ? এইচটিএমএল সাধারণত তার নোডের পাঠ্য সামগ্রীকে যেভাবে রেন্ডার করে এবং এটি এখনও নতুন লাইনের সংরক্ষণ করে।

— আকি

হুম ... আপনি ঠিক বলেছেন, প্রাক-লাইন হ'ল আরও ভাল সমাধান, আমি আর নিশ্চিত না হওয়ার পরে আমি কেন প্রাক-লাইনের পরিবর্তে প্রি-র‌্যাপ বেছে নিই। প্রাক-লাইনের জন্য ব্রাউজার সমর্থনটি কি ভাল নয়? তবে আমি এটি উত্তরে যুক্ত করব ... এখানে রেন্ডারিংগুলির একটি তুলনা করা হচ্ছে: meyerweb.com/eric/css/tests/ white

— পল ওয়েবার

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত! 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আপনার সম্পাদনার উপর ভিত্তি করে আমার দরকার ।

— ডায়লর

অনেক সময়, <<> ট্যাগটি ভাল সমাধান হয় না কারণ এটি পাঠ্যটিকে কুরিয়ারে রূপান্তর করে এবং পৃষ্ঠার শৈলীতে বিভক্ত হয়। শৈলী = "সাদা-স্থান: প্রাক-মোড়ানো;" সমাধানটি আরও ভাল সমাধান বলে মনে হচ্ছে (কমপক্ষে আমার পরিস্থিতির জন্য)

— সিএফ_হনিবেজার

@ সিএফ_হনিবাজার ভালই, আপনার @pilauউত্তরটি যথাযথ হলেও এটির অর্থ এই নয় যে আমার ভুল এবং তাই আমি

— হতাশ হয়ে পড়েছি

আমি সমস্তগুলিকে \n'র মধ্যে রূপান্তরিত করার চেষ্টা করেছি <br/>এবং অবশ্যই এই ট্যাগগুলি এইচটিএমএল মার্কআপ হিসাবে রেন্ডার করা হচ্ছিল না ... এত কিছুর পরেও আপনার styleসমাধানটি রূপান্তরিত হয়েছে এবং এটি একটি অবিশ্বাস্য সহায়তা এবং সরলকরণ ... এখন আমি করি না আমার সমস্ত ব্যাকএন্ড ডেটার চারপাশে রূপান্তর করতে হবে এবং ভিউতে কিছু পরিবর্তন করতে হবে ... আপনি +1000 প্রাপ্য!

— twknab

এটি কোডের জন্য কাজ করে তবে ব্যবহারকারীদের উদাহরণ হিসাবে বার্তা প্রদর্শন করার জন্য নয়। আমি মনে করি পলের উত্তরটি সঠিক

— কুইন্টন

Answer 3

এটি CSS এর সাথে খুব সহজ (এটি কাজ করে, আমি দিব্যি)।

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

• দেখ মা! কোনও অতিরিক্ত এইচটিএমএল ট্যাগ নেই!

Comments

@ পিলাউ আমি পাঠ্যটি মোড়াতে চাই তাতে যদি কমা (()) সাদা স্থান না থাকে আমি কীভাবে এটি করতে পারি?

— শীলেন্দ্র মাদদা

@ শৈলেন্দ্র আমার সমাধানটি পাঠ্য মোড়ানো নয়, এটি এটিকে এমনভাবে আচরণ করে যাতে এটি কোনও preট্যাগে রয়েছে। সম্ভবত আর একটি প্রশ্ন খুলুন? নাকি তোমার কথা আমি মিস করেছি?

— পাইলাউ

আমি ব্রাউজারের সামর্থ্য সম্পর্কে ভাবছিলাম। এই চার্ট অনুসারে, এটি সমস্ত বড় ব্রাউজারে কাজ করছে বলে মনে হচ্ছে। বিআর ট্যাগগুলির সাথে নতুন লাইনের প্রতিস্থাপনের তুলনায় এটি অনেক কম ঝামেলা। ধন্যবাদ! কোডটি বিন্যাস করতে কেবল মনোযোগ দিন যাতে এতে কোনও স্পেস থাকে না, তারা অবশ্যই প্রদর্শিত হবে। বিকাশকারী.মোজিলা.আর.ইন-

— পল ওয়েবার

সাদা-স্থান ব্যবহার করা আরও ভাল হতে পারে: প্রাক-মোড়ক, অন্যথায় সামগ্রী কখনও মোড়বে না rap

— পল ওয়েবার 13

Answer 4

সিএসএসের সাহায্যে এটি সহজেই অর্জন করা যায়।

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

অথবা এই উদ্দেশ্যে একটি সিএসএস ক্লাস তৈরি করা যেতে পারে এবং বাহ্যিক সিএসএস ফাইল থেকে ব্যবহার করা যেতে পারে

Answer 5

এটি নির্ভর করে, আপনি যদি দাতাকে বাঁধতে চান, তবে এতে কোনও বিন্যাস হওয়া উচিত নয়, অন্যথায় আপনি এটি যা চান তা নিশ্চিত করতে পারেন 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+ ব্যবহার করেন তবে এনজি-বাইন্ড-এইচটিএমএল ব্যবহার করুন) ব্যবহার .replace()করার পরে পরিবর্তন /nকরার জন্য<br />

Comments

ng-bind-html-unsafe

— অবমুক্ত

Answer 9

কেবল CSS শৈলীটি "সাদা-স্থান: প্রাক-মোড়ানো" ব্যবহার করুন এবং আপনার যেতে ভাল হওয়া উচিত to আমার একই সমস্যা হয়েছে যেখানে আমার ত্রুটি বার্তাগুলি পরিচালনা করতে হবে যার জন্য লাইন ব্রেক এবং সাদা স্পেসগুলি সত্যই নির্দিষ্ট। আমি কেবল এই ইনলাইনটি যুক্ত করেছি যেখানে আমি ডেটা বাঁধাই ছিল এবং এটি কবজির মতো কাজ করে!

Answer 10

আপনারও আমার একই রকম সমস্যা ছিল। আমি এখানে অন্যান্য উত্তরের বিষয়ে তেমন আগ্রহী নই কারণ তারা আপনাকে খুব সহজেই নতুন লাইনের আচরণ স্টাইল করতে দেয় না। আমি নিশ্চিত না যে আপনার মূল ডেটার উপরে নিয়ন্ত্রণ আছে কিনা তবে আমি যে সমাধানটি গ্রহণ করেছি তা হ'ল "আইটেমগুলি" স্ট্রিংয়ের অ্যারে থেকে অ্যারে হিসাবে অ্যারে হওয়াতে স্যুইচ করা, যেখানে দ্বিতীয় অ্যারেতে প্রতিটি আইটেম পাঠ্যের একটি লাইন থাকে । এইভাবে আপনি কিছু করতে পারেন:

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

আপনি এই অনুচ্ছেদে ক্লাস প্রয়োগ করতে পারেন এবং CSS সহ তাদের সুন্দরভাবে স্টাইল করতে পারেন।