টেক্সটরিয়া থেকে শব্দ মোড়ানো কীভাবে সরিয়ে ফেলবেন?

146

পাঠ্য উপচে পড়লে আমার সরল পাঠেরিয়া একটি অনুভূমিক বারটি দেখায় না। এটি একটি নতুন লাইনের জন্য পাঠ্য আবৃত করে। সুতরাং পাঠ্য ওভারফ্লো হয়ে গেলে আমি কীভাবে ওয়ার্ডরেপ মুছে ফেলব এবং অনুভূমিক বারটি প্রদর্শন করব?

html  textarea  word-wrap 
— পাথর হৃদয়
সূত্র
আপনি কি এইচটিএমএল মানে? সুইং? অন্যকিছু?
— ksuralta
এই বিভ্রান্তি এড়াতে এইচটিএমএল ট্যাগ যুক্ত করা হয়েছে, তবে আমি কেবলমাত্র বর্তমান উত্তরগুলি দ্বারা অনুমান করছি।
— সার্জিও আকোস্টা

উত্তর:

142

টেক্সারিয়াস ডিফল্টরূপে মোড়ানো উচিত নয়, তবে আপনি মোড়ানো পরিষ্কারভাবে অক্ষম করতে মোড়ক = "নরম" সেট করতে পারেন:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

সম্পাদনা: "মোড়ানো" বৈশিষ্ট্যটি আনুষ্ঠানিকভাবে সমর্থিত নয়। আমি এটি জার্মানি সেল্ফএইচটিএমএল পৃষ্ঠা থেকে পেয়েছি (একটি ইংরেজী উত্স এখানে রয়েছে ) যা আইই ৪.০ এবং নেটস্কেপ ২.০ সমর্থন করে। আমি এটি এফএফ 3.0.7 এও পরীক্ষা করেছি যেখানে এটি অনুমিত হিসাবে কাজ করে। জিনিসগুলি এখানে পরিবর্তিত হয়েছে, সেলফ এইচটিএমএল এখন একটি উইকি এবং ইংরেজি উত্সের লিঙ্কটি মারা গেছে।

সম্পাদনা 2: আপনি যদি নিশ্চিত হতে চান যে প্রতিটি ব্রাউজার এটি সমর্থন করে তবে আপনি মোড়ানো আচরণ পরিবর্তন করতে CSS ব্যবহার করতে পারেন:

ক্যাসকেডিং স্টাইল শীট (সিএসএস) ব্যবহার করে আপনি একই প্রভাব অর্জন করতে পারেন white-space: nowrap; overflow: auto;। সুতরাং, মোড়কের বৈশিষ্ট্যটিকে পুরানো হিসাবে বিবেচনা করা যেতে পারে।

থেকে এখানে (পাঠ্য এলাকা সম্পর্কে তথ্য সঙ্গে একটি চমৎকার পৃষ্ঠা হবে বলে মনে হয়)।

EDIT3: আমি নিশ্চিত যখন এটি পরিবর্তিত নই (মন্তব্য অনুযায়ী, নানারকম 2014 প্রায় হয়েছে), কিন্তু wrapএখন একটি সরকারী HTML5 এর অ্যাট্রিবিউট দেখুন W3Schools । এর সাথে মেলে উত্তর বদলেছে।

— schnaader
সূত্র
9
"মোড়ানো" বৈশিষ্ট্যটি ফায়ারফক্স 3.6 এ কাজ করে, তবে বৈধ HTML5 নয়। তবে সিএসএস সলিউশনটি কাজ করে না, যেন "হোয়াইট-স্পেস: নওর্যাপ" উপেক্ষা করা হয়।
— ক্লিন্ট পাচল
9
white-space: pre;(বা pre-line/ pre-wrap) wrap="off"আমার জন্য একই প্রভাব ফেলেছিল (যদিও white-space: nowrapএটি সম্মান করে না padding)
— ফিলিফ্রেও
5
@ ক্লিন্টপ্যাচেল আসলে, wrapবৈধ এইচটিএমএল 5 ... এটির সেটিংস এখন "hard"এবং "soft"( রেফ )
— মট্টি
4
@ মট্টি মজিলা ডক্সের চেয়ে HTML5 স্পেসিফিকেশনের বর্তমান সংস্করণে লিঙ্ক করা আরও ভাল। বর্তমান সংস্করণটির লিঙ্কটি এখানে রয়েছে - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
— পাইওটর ডব্রোগস্ট
2
wrap="off"এটি আর বৈধ নয় তবে এটি আই এবং এজ উভয়ের জন্য প্রয়োজনীয়!
— জুলস
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapআপনি যদি শ্বেত স্পেস সম্পর্কে চিন্তা না করেন তবে এটিও কাজ করে তবে আপনি চান না যে আপনি কোড (বা ইন্টেন্টেড অনুচ্ছেদে বা এমন কোনও বিষয়বস্তু যেখানে ইচ্ছাকৃতভাবে একাধিক স্পেস থাকতে পারে) নিয়ে কাজ করছেন ... তাই আমি পছন্দ করি pre।

overflow-wrap: normal( word-wrapপুরানো ব্রাউজারগুলিতে ছিল) কিছু পিতামাতার সেই সেটিংটি পরিবর্তিত করার ক্ষেত্রে প্রয়োজন; preসেট করা থাকলেও এটি মোড়ানোর কারণ হতে পারে ।

এছাড়াও - বর্তমানে গৃহীত উত্তর বিপরীত - textareas না প্রায়ই ডিফল্টরূপে মোড়ানো। pre-wrapআমার ব্রাউজারে এটি ডিফল্ট বলে মনে হচ্ছে।

— আংশিক মেঘলা
সূত্র
18
এফএফ 20 এর সাথে আপনার এখনও HTML টেক্সারিয়া ট্যাগটিতে মোড়ানো = "অফ" দরকার! এই প্রযুক্তিটি যেমন বেমানান বাজে বাজে।
— লরেন্স ডল
3
সিএসএস সলিউশন সরবরাহ করতে এবং
— টেক্সারিয়াস
1
: আহ, সেখানে 2001 থেকে কিন্তু কিছু সাম্প্রতিক (2014) দেব এহসান Akhgari মাধ্যমে Chrome কে আচরণের জন্য মন্তব্য সমর্থন ফায়ারফক্স এ একটি বৈশিষ্ট্য অনুরোধ মনে করা হয় bugzilla.mozilla.org/show_bug.cgi?id=82711 । যাও এবং এটি upvote!
— সিরো সান্তিলি 郝海东 冠状 病 六四 事件
1
এটি এখন ফায়ারফক্সে কাজ করে (অররা চ্যানেল, v36) - সবুজ পাঠ্য jsfiddle.net/MLhDevelopment/gvjy14xu দেখুন ।
— mlhDev
2
ব্যক্তিগতভাবে, আমি মনে করি এটি প্রতিস্থাপন ভালো overflow-x: scrollসঙ্গে overflow: auto। স্ক্রোল বারগুলি পাঠ্যের ক্ষেত্রে উপলব্ধ টাইপিং জায়গাকে হ্রাস করে। এছাড়াও, আইই 11 আপনার পথের সাথে অযথা একটি উল্লম্ব স্ক্রোল বার উপস্থাপন করেছে, তবে overflow: autoএটি ঠিক করেছে।
— স্যাম
19

নিম্নলিখিত সিএসএস ভিত্তিক সমাধানটি আমার পক্ষে কাজ করে:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>
— Galghamon
সূত্র
15

আমি একই সাথে এই সমস্ত কাজ করে একটি পাঠ্য তৈরি করার উপায় খুঁজে পেয়েছি:

  • অনুভূমিক স্ক্রোলবার সহ
  • মাল্টলাইন পাঠ্য সমর্থন করে
  • পাঠ্য মোড়ানো নয়

এটিতে ভাল কাজ করে:

  • ক্রোম 15.0.874.120
  • ফায়ারফক্স 7.0.1
  • অপেরা 11.52 (1100)
  • সাফারি 5.1 (7534.50)
  • আইই 8.0.6001.18702

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

সিএসএস বিভাগে আমি কেবল ক্রোম, ফায়ারফক্স, অপেরা এবং সাফারির জন্য এটি ব্যবহার করেছি:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

সিএসএস বিভাগে আমি কেবল আইইয়ের জন্য এটি ব্যবহার করেছি:

textarea {
  overflow:scroll;
}

এটি কিছুটা জটিল ছিল, তবে সিএসএস রয়েছে।

একটি (x) HTML ট্যাগ এর মতো:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

এবং বিভাগের শেষে <head>একটি জাভাস্ক্রিপ্ট এর মতো:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

জাভা স্ক্রিপ্টটি ডাব্লু 3 সি বৈধকরণকারীকে এক্সএইচএমএল 1.1 স্ট্রাইক পাস করার জন্য, যেহেতু মোড়কের বৈশিষ্ট্যটি অফিসিয়াল নয় এবং সুতরাং এটি কোনও (এক্স) এইচটিএমএল ট্যাগ হতে পারে না, তবে বেশিরভাগ ব্রাউজারগুলি এটি হ্যান্ডেল করে, তাই পৃষ্ঠাটি লোড করার পরে এটি সেই বৈশিষ্ট্যটি সেট করে।

আশা করি এটি আরও ব্রাউজার এবং সংস্করণে পরীক্ষা করা যেতে পারে এবং কাউকে এটিকে উন্নত করতে সহায়তা করতে এবং এটি সমস্ত সংস্করণের জন্য সম্পূর্ণ ক্রস ব্রাউজারে পরিণত করে।

— z666zz666z
সূত্র
4
+1 .আরপ = 'অফ' হ'ল ম্যাজিক যা এফএফ 14.0.1 এ কৌশলটি করেছে ... ধন্যবাদ
— শানিমাল
আপনি এইচটিএমএলে মোড়ানো = "অফ" ব্যবহার করতে পারলেও জাভাস্ক্রিপ্টটি সাফারি 5.0.6 (সর্বশেষ পিপিসি সংস্করণ) এ কাজ করছে বলে মনে হচ্ছে না।
ক্রপ ব্যবহার করে, মোড়ানো তা আমার জন্য কী করেছিল। আমি এটি CSS এর ন-মোড়কের সাথে একযোগে ব্যবহার করেছি।
— খনিঅ্যান্ডক্রাফ্ট 12
মোড়ানো = 'বন্ধ' আইই অন্যান্য ব্রাউজারগুলির মতো আচরণ করে।
— র্যান্ড স্কুলার্ড 21
4

এই প্রশ্নটি মোড়কে অক্ষম করার জন্য সবচেয়ে জনপ্রিয় একটি বলে মনে হচ্ছে textarea। তবে, এপ্রিল 2017 পর্যন্ত আমি দেখতে পেয়েছি যে আইই 11 (11.0.9600) উপরের সমাধানগুলির সাথে শব্দ মোড়ানো অক্ষম করবে না ।

শুধুমাত্র সমাধান যা IE 11 থাকতে জন্য কাজ করে wrap="off"। wrap="soft"এবং / অথবা বিভিন্ন সিএসএস অ্যাট্রিবিউটগুলি white-space: preপরিবর্তিত করে যেমন আইই ১১ টি মোড়ানো বেছে নেয় তবে এটি অন্য কোথাও আবৃত হয়। মনে রাখবেন যে, আমি সহ বা ছাড়া এই পরীক্ষা আছে সামঞ্জস্যতা দর্শন । IE 11 হ'ল এইচটিএমএল 5 উপযুক্ত, তবে এই ক্ষেত্রে নয় case

সুতরাং, লাইনগুলি অর্জন করার জন্য যা তাদের শ্বেতক্ষেত্র ধরে রাখে এবং ডান দিক থেকে আমি ব্যবহার করছি:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

ভাগ্যক্রমে এটি Chrome এবং ফায়ারফক্সেও কাজ করবে বলে মনে হচ্ছে। আমি প্রাক-এইচটিএমএল 5 এর ব্যবহার রক্ষা করছি না wrap="off", কেবল এই বলে যে এটি 11 11-র জন্য প্রয়োজনীয় বলে মনে হচ্ছে।

— JonBrave
সূত্র
খুব ভাল, আমার দিন বাঁচা! প্রোগ্রামডমেটিকভাবে নতুন লাইনে যুক্ত হওয়া গ্রহণযোগ্য উত্তর থেকে কোডটি কেন ব্যবহার করতে ব্যর্থ হয়েছিল তা নিয়ে আমার মাথা ভেঙে ফেলা হচ্ছে।
— তুম
1
এই IE বাগটিও এজ
— জোলস
3

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন তবে নিম্নলিখিতটি আজ সবচেয়ে বহনযোগ্য বিকল্প হতে পারে (পরীক্ষিত ফায়ারফক্স 31, ক্রোম 36):

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

কোনও মানক, বহনযোগ্য সিএসএস সমাধান নেই বলে মনে হচ্ছে:

এছাড়াও, আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন, আপনি পাশাপাশি এসিই সম্পাদক ব্যবহার করতে পারেন:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

সম্ভবত textareaএসিইর সাথে কাজ করে কারণ এটি অপ্রকাশিত / অসম্পূর্ণভাবে প্রয়োগ করা হয় এমন কোনওটি ব্যবহার করে না তবে এটি ব্যবহার করছে কিনা তা নিশ্চিত নয় contenteditable।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.