এইচটিএমএলে একটি স্ট্রিং রেন্ডার করুন এবং স্পেস এবং লাইনব্রেকগুলি সংরক্ষণ করুন


232

আমার কাছে একটি এমভিসি 3 অ্যাপ রয়েছে যার বিশদ পৃষ্ঠা রয়েছে। এর অংশ হিসাবে আমার কাছে একটি বিবরণ রয়েছে (একটি ডিবি থেকে পুনরুদ্ধার করা হয়েছে) যেখানে ফাঁকা স্থান এবং নতুন লাইন রয়েছে। যখন এটি রেন্ডার করা হয় তখন নতুন লাইন এবং স্পেসগুলি HTML দ্বারা উপেক্ষা করা হয়। আমি সেই জায়গাগুলি এবং নতুন লাইনগুলি এনকোড করতে চাই যাতে সেগুলি উপেক্ষা করা না যায়।

তুমি এটা কিভাবে করলে?

আমি এইচটিএমএল.এনকোড চেষ্টা করেছি তবে এটি এনকোডিংটি প্রদর্শন করে শেষ হয়েছে (এবং এমনকি স্পেস এবং নতুন লাইনেও নয় তবে কিছু অন্যান্য বিশেষ অক্ষরে)


উত্তর:


544

কেবল কন্টেন্টের সাথে স্টাইল করুন white-space: pre-wrap;

div {
    white-space: pre-wrap;
}
<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>


1
+1 এই সমাধানটি পরিষ্কার, এবং আমি এটির সাথে সিকিউরিটি এলিমেন্ট ব্যবহার করার পরামর্শ দেব scape
রায়ান গেটস

@ user941632: আপনার কাজ করতে বাধা দিতে অন্য কিছু স্টাইলিং থাকতে হবে। : এটা এখানে একটি স্প্যান কাজ jsfiddle.net/VwGSf/64
পিট

43
white-space: pre-line;আপনি যদি প্রতিটি অনুচ্ছেদের প্রথম লাইন ইন্ডেন্টেড না চান।
উইল শোয়ানবার্গার

4
এটি একটি পুরানো টিকিট তবে এটি অনুমোদিত উত্তরটি কী করছে তা বোঝাতে সহায়তা করার জন্য এমডিএন এর মতো একটি রেফারেন্স যুক্ত করা সার্থক হতে পারে :)
ফিল ডি

এবং যদি এটি এখনও চান না তবে এটি আপনার এইচটিএমএল উপাদানগুলির মধ্যে সাদা স্থান (বা জিনিসগুলি যা তাদের উত্পন্ন করে - উদাহরণস্বরূপ একটি গুরুত্বপূর্ণ টেমপ্লেট) তা পরীক্ষা করে না ... ...
ইওর্ডান জর্জিভ

43

আপনি <pre>ট্যাগ ব্যবহার করার চেষ্টা করেছেন ?

http://jsfiddle.net/NweRa/


4
এটি একটি নির্দিষ্ট প্রস্থের ফন্টে মানটি প্রদর্শন করে
ড্যান ডট নেট

3
স্টাইল পরিবর্তন করতে আপনি CSS ব্যবহার করতে পারেন। আমি সত্যিই একটি প্রাথমিক উদাহরণ লিখেছি। আপনি @ পেটের উত্তর অনুসারে <পছন্দ> ট্যাগ বা সিএসএস ব্যবহার করতে পারেন।
এন

19

আপনি হোয়াইট-স্পেস ব্যবহার করতে পারেন : ফর্ম্যাটিংয়ে লাইন ব্রেকগুলি সংরক্ষণ করতে প্রাক-লাইন । এইচটিএমএল উপাদানগুলি ম্যানুয়ালি toোকানোর দরকার নেই।

.popover {
    white-space: pre-line;    
}

বা আপনার এইচটিএমএল উপাদান যুক্ত করুন style="white-space: pre-line;"


7

আপনার সাথে সব শূণ্যস্থান প্রতিস্থাপন করতে চাইবেন &amp;nbsp;(অ-ভঙ্গ স্থান) এবং সমস্ত নতুন লাইন \nদিয়ে <<b></b>br>(HTML লাইন বিরতি)। এটি আপনি যে ফলাফলটি সন্ধান করছেন তা অর্জন করা উচিত।

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

এই প্রকৃতির কিছু।


এটি কাজ করবে, আমি অনুমান করি যে এখানে কিছু তৈরি হবে Maybe সম্ভবত আমি এটি অতিরিক্ত চিন্তা করছি।
ড্যান ডট নেট

যতদূর আমি দেখেছি সেখানে নেই, তবে এটি সরল প্রতিস্থাপন করা খুব বেশি ওভারহেডের নয়। আমি মনে করি না পারফরম্যান্স একটি সমস্যা হবে।
বিকাশকারী

আমার ধারণা এমভিসি'র 'সমস্যা' হ'ল আমি যদি আপনার পরামর্শ অনুযায়ী স্ট্রিংটি পরিবর্তন করি তবে এটি '& nbsp' প্রদর্শিত হবে; স্পেসগুলির পরিবর্তে, যদি না আমি @ Html.Raw () ব্যবহার করি। তারপরে আমাকে এক্সএসএস এবং ব্যবহারকারী খারাপ এইচটিএমএল প্রবেশের বিষয়ে উদ্বিগ্ন হতে হবে। আমি sertোকাতে স্ট্রিংগুলি এনকোড করতে পারলাম যাতে আমি সে সম্পর্কে কম উদ্বিগ্ন হতে পারি।
ড্যান ডট নেট

4

আমি white-space: pre-wrap;পিট দ্বারা বর্ণিত কৌশলটি চেষ্টা করছিলাম তবে যদি স্ট্রিংটি ধারাবাহিক এবং দীর্ঘ হয় তবে এটি কেবল পাত্রে বাইরে চলে যায় এবং যে কোনও কারণেই বাধা দেয় না , তদন্তের জন্য খুব বেশি সময় নেই .. তবে যদি আপনিও থাকেন একই সমস্যা, আমি <pre>ট্যাগ এবং নিম্নলিখিত সিএসএস ব্যবহার করে শেষ করেছি এবং সবকিছুই ভাল ছিল ..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

1

আপনি @ বিকাশকারীদের উত্তরে যেমন উল্লেখ করেছেন, আমি সম্ভবত ব্যবহারকারী ইনপুটটিতে এইচটিএমএল-এনকোড করব। আপনি যদি এক্সএসএস নিয়ে চিন্তিত হন তবে সম্ভবত এটির মূল রূপে আপনার ব্যবহারকারীর ইনপুট কখনই লাগবে না, তাই আপনি এটিকে এড়িয়ে যেতে পারেন (এবং আপনি যখন থাকবেন তখন স্পেস এবং নিউলাইনগুলি প্রতিস্থাপন করুন)।

নোট করুন যে ইনপুটটিতে পালানোর অর্থ হল আপনি হয় এইচটিএমটিএল ব্যবহার করুন aw নির্দিষ্ট ইনপুটটি রেন্ডার করতে একটি এমভিসিএইচটিএমএল স্ট্রিং তৈরি করা উচিত।

আপনি চেষ্টা করতে পারেন

System.Security.SecurityElement.Escape(userInput)

তবে আমি মনে করি এটি কোনও স্থান ছাড়বে না। সুতরাং সেই ক্ষেত্রে, আমি একটি নেট নেট করার পরামর্শ দিই

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

ব্যবহারকারী ইনপুট। এবং আপনি যদি ব্যবহারের আরও গভীরতা বজায় রাখতে চান তবে সম্ভবত আপনি কোনও ট্যাগের পূর্বনির্ধারিত সেটকে অনুমতি দেওয়ার জন্য ব্যবহারকারীর ইনপুটটির একটি এক্সএমএল পার্স করতে পারেন (বা নিয়মিত এক্সপ্রেশন দিয়ে খেলতে পারেন)। উদাহরণস্বরূপ, অনুমতি দিন

<p>, <span>, <strong>

... তবে অনুমতি দিও না

<script> or <iframe>

0

একটি textareaউপাদান একটি বিবরণ মোড়ানো ।


0

এটি করার একটি সহজ উপায় আছে। আমি এটি আমার অ্যাপ্লিকেশনটিতে চেষ্টা করেছি এবং এটি বেশ ভাল কাজ করেছে।

কেবল টাইপ করুন: $ পাঠ্য = $ সারি ["পাঠ্য"]; প্রতিধ্বনি এনএল 2 বিআর ($ পাঠ্য);

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.