আমি কীভাবে প্রাক ট্যাগটিতে পাঠাতে পারি?

Question

pre ট্যাগগুলি HTML এ কোড ব্লক এবং স্ক্রিপ্টগুলি লেখার সময় আউটপুট ডিবাগিংয়ের জন্য খুব দরকারী, তবে আমি কীভাবে একটি দীর্ঘ রেখা মুদ্রণের পরিবর্তে পাঠ্যকে ওয়ার্ড-র‌্যাপ করব?

Answer 1

উত্তর, সিএসএস এই পৃষ্ঠা থেকে :

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Comments

white-space:pre-line;(এবং সমস্ত ব্রাউজারের সামঞ্জস্যপূর্ণ স্বাদগুলি) কিছু ক্ষেত্রে (উদাহরণস্বরূপ ট্যাব ছাড়াই) আরও পর্যাপ্ত বলে মনে হয় কারণ এটি লাইনের শুরুতে স্থানটি সরিয়ে নেয় (যদি কিছু থাকে)

— MediaVince

@ মিডিয়াভিংস, pre-lineসমস্ত শ্বেত স্থান (কেবলমাত্র লাইনের শুরুতে নয়) ধসে পড়ে। বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / সিএসএস / white-spaceহোয়াইট স্পেসে মানগুলির আচরণের সংক্ষিপ্তসার হিসাবে একটি সারণী রয়েছে ।

— পল

word-wrap: break-wordপ্রশ্নটি যা জিজ্ঞাসা করছে তা করে না, এটি শব্দের মধ্যে লাইন মোড়কেও ঘটায়। আপনি এই লাইনটি মুছতে পারেন। আধুনিক ব্রাউজারগুলিতে আপনার কোনও -mozবা অন্য উপসর্গের দরকার নেই।

— ফ্লিম

Answer 2

এটি পাঠ্যের preমোড়কে এবং -ট্যাগের মধ্যে শ্বেত-স্থান বজায় রাখতে দুর্দান্ত কাজ করে :

pre {
    white-space: pre-wrap;
}

Comments

এটি কেবলমাত্র সিএসএস 3 কারণ - আরও সামঞ্জস্যের জন্য অ্যাডামবক্স থেকে উত্তর দেখুন।

— জনপ্রিয় বানর

Answer 3

আমি খুঁজে পেয়েছি যে প্রাক ট্যাগটি এড়িয়ে যাওয়া এবং সাদা স্থান ব্যবহার করা: একটি ডিভের প্রাক-মোড়ানো একটি আরও ভাল সমাধান।

 <div style="white-space: pre-wrap;">content</div>

Comments

জনপ্রিয় উত্তরের চেয়ে সহজ। ধন্যবাদ!

— রিকি

আমার ক্ষেত্রে আমি প্রাক ফর্ম্যাট পাঠ্যটি প্রদর্শন করতে চেয়েছিলাম যাতে কিছু টেবিল তৈরি করতে ট্যাব রয়েছে। আমি আপনার সমাধানটি ব্যবহার করেছি প্লাস আমি একটি মনস্ফেস ফন্ট যুক্ত করেছি যাতে সমস্ত কলামগুলি সারিবদ্ধ হয়েছিল:style="white-space: pre-wrap; font-family:monospace;"

— জানুয়ারী

এটি আরও সহজ হতে পারে, <pre>কোড ব্লকগুলির জন্য ব্যবহারের ক্ষেত্রে আরও অর্থগত মান থাকতে পারে ।

— অ্যাঞ্জেলস চলারিস

আমি জানি যে আমি এই গেমটি করতে দেরি করেছি, তবে কেন এই সমাধানটি স্টাইলশীটে একবার সেট করার চেয়ে ভাল? আমার এইচটিএমএল আউটপুট স্ক্রিনে একাধিক ডিভ রয়েছে যা এর প্রয়োজন হবে। স্টাইলশীটে উপাদানটিকে একক ফিক্স করার মতো সমস্ত সমস্যার সমাধান করে।

— ওয়েবফ্রোগ

@ ওয়েফফ্রাগস হ্যাঁ, প্রিপ্রাপের ক্লাস করা ভাল হবে।

— ম্যাসন 240

Answer 4

সর্বাধিক সংক্ষেপে, এটি কন্টেন্ট না ভাঙিয়ে একটি "প্রাক" ট্যাগের অভ্যন্তরে লিখিত সামগ্রীগুলিকে আবদ্ধ করতে বাধ্য করে। চিয়ার্স!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

এখানে সরাসরি উদাহরণ দেখুন ।

Answer 5

এই আমার প্রয়োজন ছিল। এটি শব্দগুলি ভাঙ্গা থেকে বিরত রেখেছে তবে পূর্ব অঞ্চলে গতিশীল প্রস্থের জন্য এটি অনুমোদিত।

word-break: keep-all;

Answer 6

আমি প্রাকটি ভুলে যাওয়ার পরামর্শ দিচ্ছি এবং এটি কেবল একটি টেক্সেরিয়ায় রেখেছি।

আপনার ইনডেন্টিং থেকে যাবে এবং আপনার কোড কোনও পথ বা কোনও কিছুর মাঝে শব্দ মোড়ানো হবে না।

আপনি যদি ক্লিপবোর্ডে অনুলিপি করতে চান তবে কোনও পাঠ্য ক্ষেত্রেও পাঠ্য সীমা নির্বাচন করা সহজ।

নীচে একটি পিএইচপি অংশ আছে সুতরাং আপনার যদি পিএইচপি না থাকে তবে আপনি এইচটিএমএল বিশেষ অক্ষরগুলি প্যাক করার উপায়টি পৃথক হবে।

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

জেএসের ক্লিপবোর্ডে কীভাবে পাঠ্য অনুলিপি করবেন সে সম্পর্কিত তথ্যের জন্য দেখুন: আমি কীভাবে জাভাস্ক্রিপ্টের ক্লিপবোর্ডে অনুলিপি করব? ।

যাহোক...

আমি কেবল স্ট্যাকওভারফ্লো কোড ব্লকগুলি পরিদর্শন করেছি এবং তারা << কোড <ট্যাগ> মোড়কিতে CSS এর সাথে মোড়ানো একটি ট্যাগটিতে আবৃত করে ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

এছাড়াও স্ট্যাকওভারফ্লো কোড ব্লকের সামগ্রীটি সিনট্যাক্স হ'ল (আমার মনে হয়) http://code.google.com/p/google-code- ব্যাখ্যাtify/ ব্যবহার করে হাইলাইট করা হয় ।

এটি একটি দুর্দান্ত সেটআপ তবে আমি আপাতত টেক্সারিয়ার সাথে যাচ্ছি।

Comments

ইনপুট ব্যতীত অন্য কোনও কিছুর জন্য পাঠ্য অঞ্চলগুলি ব্যবহার করা শব্দার্থগতভাবে ভুল হবে না? আমার কাছে এক অদ্ভুত সমাধান বলে মনে হচ্ছে।

— জোশ এম

"প্রাক" ট্যাগটিতে "প্রাক" ট্যাগে ফর্ম্যাটিং শৈলীর একগুচ্ছ যোগ করার মতো শব্দার্থগতভাবে ভুল নয়, যখন "প্রাক" পরামর্শ দেয় যে অন্তর্ভুক্ত পাঠ্যটি প্রাক-বিন্যাসযুক্ত এবং তাই অতিরিক্ত বিন্যাসের প্রয়োজন নেই এবং এটি যেমন রয়েছে তেমন গ্রহণ করা উচিত;) "ক্রিয়ামূলক" এর চেয়ে "শব্দার্থতাকে" অগ্রাধিকার দিন।

— এরকার

আমি মনে করি না <pre>এর কোনও অর্থগত অর্থ আছে (বিপরীতে <code>), এর সহজ অর্থ হল যে নিউলাইনগুলি এবং একাধিক স্পেস সংরক্ষণ করা উচিত।

— ফ্লিম

এটি "প্রাক-ফর্ম্যাট করা" এর জন্য সংক্ষিপ্ত। আপনি কি প্রস্তাব দিচ্ছেন যে এটি কেবল পূর্ব-ফর্ম্যাট-নিউলাইনস এবং একাধিক স্পেস-কেবলমাত্র ছোট?

— এরকার

প্রাক-বিন্যাসযুক্ত পাঠ্যের ধরণের উপর নির্ভর করে সামগ্রীর প্রকারটি অভ্যন্তরীণ ট্যাগ দ্বারা নির্দিষ্ট করা বোঝানো হয়। আমি আমার বন্ধুদের ডাব্লু 3 সি

— জোশপ্রেই

Answer 7

আমি @richelectron এবং @ user1433454 উত্তর একত্রিত করেছি।
এটি খুব ভাল কাজ করে এবং পাঠ্য বিন্যাস সংরক্ষণ করে।

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Answer 8

অপরপক্ষে তুমি:

pre { white-space: normal; }

মনোস্পেস ফন্ট বজায় রাখতে তবে শব্দ-মোড়ানো যুক্ত করুন:

pre { overflow: auto; }

যা দীর্ঘ রেখার জন্য অনুভূমিক স্ক্রোলিং সহ একটি নির্দিষ্ট আকারের অনুমতি দেবে।

Comments

ওহ, ওভারফ্লো অনুস্মারকটির জন্য আপনাকে ধন্যবাদ! মোবাইল প্রদর্শনের জন্য দুর্দান্ত।

— এক্সটিএল

Answer 9

ব্যবহার করার চেষ্টা করুন

<pre style="white-space:normal;">. 

অথবা আরও ভাল সিএসএস নিক্ষেপ করুন।

Comments

এই এক আই ই 7 এ কাজ বলে মনে হয় কিন্তু 6. এই শুধুমাত্র প্রস্তাব যে ইন্টারনেট জন্য প্রতিশ্রুতি করলো হচ্ছে ... সব অন্যান্য পরামর্শের অন্যান্য ব্রাউজারের জন্য ভাল ছিল ...

— topwik

মাইন্ডমেন্ড অবশ্যই ব্রাউজারের ক্যাচিং জিনিস হতে পারে। আইই 6 পুনরায় চালু করুন এবং সবকিছু ঠিক আছে। চিয়ার্স।

— topwik

এই সমাধানটিতে সমস্যা হ'ল এটি নতুন লাইন চরিত্রগুলিকেও দ্রবীভূত করবে ... উদাহরণস্বরূপ, অনুচ্ছেদে পাঠ্যের কোনও বিচ্ছেদ হারাবে।

— ক্রিস ডব্লিউ।

Answer 10

S এর white-space: pre-wrapভিতরে স্বয়ংক্রিয় লাইন ভাঙ্গার জন্য ব্যবহার করুন এবং কিছু উপসর্গ pre।

word-wrap: break-wordএটি ব্যবহার করবেন না কারণ এটি অবশ্যই, একটি শব্দ অর্ধেক ভাঙা যা সম্ভবত আপনি চান না এমন কিছু is

Answer 11

সেরা ক্রস ব্রাউজার ওয়ে লাইন বিরতি পেতে এবং সঠিক কোড বা পাঠ্য দেখানোর জন্য কাজ করেছিল: (ক্রোম, ইন্টারনেট এক্সপ্লোরার, ফায়ারফক্স)

সিএসএস:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

এইচটিএমএল:

<xmp> your text or code </xmp>

Comments

আমার জন্য দুর্দান্ত কাজ করেছেন :-)

— ওয়েসলি তুজা

এক্সএমপিটি এইচটিএমএল ৩.২-এর থেকে অবহেলা করা হয়েছে, পুরোপুরি এইচটিএমএল 5 থেকে সরানো হয়েছে এবং এর সাথে আরম্ভ করার জন্য কখনই সঠিকভাবে কাজ হয়নি। এটি বিভিন্ন ব্রাউজারের মধ্যে নিয়মিত প্রয়োগ করা হয়নি।

— পিটারটো দ্য থার্ড

সাদা স্থান ব্যবহার করে: প্রাক-মোড়ানো; এবং শব্দ-মোড়ানো: বিরতি-শব্দ; আমার সিএসএসে, (জসন) স্নিপেটের ইন্ডেন্টেশন রাখে, প্রাক লাইন এটি সরিয়ে দেয়। (ক্রোম)

— পিটার ভিসার

Answer 12

নিম্নলিখিত আমাকে সাহায্য করেছে:

pre {
    white-space: normal;
    word-wrap: break-word;
}

ধন্যবাদ

Comments

আমি মনে করি এটি ব্যবহার করা আরও ভাল white-space: pre-wrap;কারণ এটি সাদা জায়গাগুলিকে সম্মান করে

— ইভান ফেরার ভিলা

Answer 13

<pre>-এলিমেন্টটি "প্রাক-ফর্ম্যাট-পাঠ্য" এর জন্য দাঁড়িয়েছে এবং এটি এর ট্যাগগুলির মধ্যে পাঠ্যটির বিন্যাস (বা যাই হোক না কেন) রাখার লক্ষ্য। অতএব এটি স্বয়ংক্রিয়ভাবে শব্দ-মোড়ানো বা- <pre>ট্যাগের মধ্যে লাইন-ব্রেক থাকার জন্য উদ্দীপিত নয়

একটি উপাদানের পাঠ্য একটি নির্দিষ্ট-প্রস্থের ফন্টে (সাধারণত কুরিয়ার) প্রদর্শিত হয় এবং এটি ফাঁকা এবং লাইন উভয় বিরতি সংরক্ষণ করে ।

উত্স: w3schools.com , নিজের দ্বারা জোর দেওয়া।

Comments

এটি কেবল সত্যটি বর্ণনা করে, একটি প্রাক-ট্যাগের মধ্যে পাঠ্যকে স্বয়ং-মোড়ানো সম্ভব, যদিও এটি স্বয়ং-মোড়ানোর প্রাক-ট্যাগের উদ্দেশ্য নয়।

— রবি_আগস্ট

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

— মার্কাস

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

— dwk