কোনও ফাঁকা মোড়ানো অবস্থায় আমি কীভাবে একটি দীর্ঘ স্ট্রিং জোর করতে পারি?


193

আমার একটি দীর্ঘ স্ট্রিং রয়েছে (একটি ডিএনএ সিকোয়েন্স)। এটিতে কোনও শ্বেতস্থান অক্ষর নেই।

উদাহরণ স্বরূপ:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

এই পাঠ্যটি একটি html:textareaবা একটিতে মুড়িয়ে রাখতে বাধ্য করার জন্য সিএসএস নির্বাচক কী হবে xul:textbox?


17
হাস্যকরভাবে স্ট্রিং ওভারফ্লোতে স্ট্রিংটি ভেঙে যায় না ...
স্প্ল্যাটনে

উত্তর:


273

ব্লক উপাদানগুলির জন্য:

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

ইনলাইন উপাদানগুলির জন্য:

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>


এটি কেবল আইই, সাফারি এবং এফএফ 3.1 (আলফা) এ সমর্থিত।
অ্যাডাম বেলায়ার

1
এটি কেবল ব্রাউজারগুলির নতুন তরঙ্গে কাজ করে - caniuse.com/#search=word-break দেখুন
মাইকেল বার্নার্ড

9
@ মিশেল: উত্তরে "শব্দ-মোড়ানো" নিয়ম ব্যবহার করা হয়েছে, "শব্দ-বিরতি" নয়; পূর্বেরটি বর্তমানে ব্যবহৃত প্রায় প্রতিটি ব্রাউজারে ব্যবহৃত হিসাবে সমর্থিত । "আংশিক সমর্থন" যেখানে ইঙ্গিত করা হয়েছে, সেখানে "শব্দ-মোড়ানো" বিধিটির জন্য "ব্রেক-শব্দ" মানটি এখনও কার্যকর বলে মনে হয়।
রোবস্তো

2
overflow-wrapস্ট্যান্ডার্ডের কারণে সম্পত্তিটির নতুন নামকরণ হয়েছে , তবে wrod-wrapএটি ব্যাপকভাবে প্রয়োগ করা হয়েছে।
সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

1
"ডিসপ্লে: টেবিল-সেল" নিয়েও কাজ করে, আমার ক্ষেত্রে প্রযোজনীয় ছিল
Leon

107

আপনি বিরতি দিতে চান এমন পয়েন্টগুলিতে শূন্য-প্রস্থের স্পেস রাখুন । শূন্য প্রস্থের স্থানটি &#8203;এইচটিএমএলে রয়েছে। উদাহরণ স্বরূপ:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC


4
ভাল পরামর্শ, আমি আজ নতুন কিছু শিখেছি, আপনাকে ধন্যবাদ!
মাত্তেও কন্টা

2
এই সমাধানের জন্য ধন্যবাদ। কোনও টেবিলের অভ্যন্তরে কাজ করার জন্য এমন কিছু পেতে খুব কষ্ট হচ্ছিল এবং এই সমাধানটিই কেবলমাত্র আমি, ফায়ারফক্স এবং ক্রোমে কাজ পেয়েছি।
ফারহিন

1
+1, এটি আরও বেশি কেস কভার করে কারণ এটি আরও ভাল কাজ করে, যদিও প্রশ্নটি আরও একটি বিশেষ ক্ষেত্রে ছিল।
মনট্রিলিস্ট

2
আপনি বিকল্পভাবে <wbr>ট্যাগটি ব্যবহার করতে পারেন , যা lineচ্ছিক লাইন-ব্রেক সুযোগ দেওয়ার একই উদ্দেশ্যে কাজ করে।
Justisb

7
অনুলিপি এবং আটকানো হতে পারে এমন জিনিসগুলিতে আপনি এটি করেন কিনা দেখুন।
অ্যালেক্স

42

এখানে কয়েকটি খুব দরকারী উত্তর:

কিভাবে আমার ডিভ ভাঙ্গা থেকে দীর্ঘ শব্দ রোধ করবেন?

আপনার সময় বাঁচাতে, এটি CSS এর মাধ্যমে সমাধান করা যেতে পারে:

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;

4
এটি +1 কারণ এটি শব্দ-বিরতির উল্লেখ করেছে: বিরতি; যা IE9 এ আমার জন্য কাজ করেছিল
নিক বেনিডিক্ট

3
word-break: break-all;আমার জন্য অ্যান্ড্রয়েড ওয়েবভিউতে কেবল তিনিই কাজ করেছিলেন।
স্ট্যান

আপনাকে ধন্যবাদ word-break: break-all;!
লনি সেরা

18

আমার জন্য এটি কাজ করে,

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

আপনি পরিবর্তে অন্য একটি ডিভের ভিতরে একটি ডিভি ব্যবহার করতে পারেন td। আমি ব্যবহার করেছি overflow:auto, এটি আমার অপেরা এবং আইই ব্রাউজার উভয়ই সমস্ত পাঠ্য দেখায় shows


এটি আমার পক্ষে কার্যকর হয়নি। আমাকে "ওয়ার্ড-মোড়ানো" সম্পত্তিটি ডিভ-এ স্থানান্তর করতে হবে এবং "ওভারফ্লো" সম্পত্তিটি সরিয়ে ফেলতে হবে। এই পরিবর্তনগুলির সাথে, কাজ করে।
ড্যানিগনলাইনা

12

আপনি সিএসএস দিয়ে এটি করতে পারবেন বলে আমি মনে করি না। পরিবর্তে, স্ট্রিং বরাবর নিয়মিত 'শব্দের দৈর্ঘ্য' এ, এইচটিএমএল সফট-হাইফেন sertোকান:

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

এটি রেখার শেষে একটি হাইফেন প্রদর্শন করবে, যেখানে এটি মোড়ানো হবে, যা আপনি চান তা হতে পারে বা নাও পারে।

দ্রষ্টব্য সাফারি <textarea>ফায়ারফক্সের বিপরীতে লং স্ট্রিংটিকে যে কোনও উপায়ে আবদ্ধ করবে বলে মনে হচ্ছে ।


বাহ, সে সম্পর্কেও জানতাম না। ঝরঝরে!
ড্যানিয়েল শেফার

আমি এটি সম্পর্কে জানতাম না। দ্বিগুণ ঝরঝরে!
কার্ল

11

কোনও স্ট্রিংয়ের শ্বেত স্থান নেই এমন জোর করে একটি CSS পদ্ধতি ব্যবহার করুন। তিনটি পদ্ধতি:

1) সিএসএস সাদা-স্পেস সম্পত্তি ব্যবহার করুন। ব্রাউজারের অসঙ্গতিগুলি কভার করতে, আপনাকে এটি বেশ কয়েকটি উপায়ে ঘোষণা করতে হবে। সুতরাং আপনার ব্লুং স্ট্রিংটিকে কিছু ব্লক স্তর উপাদান (যেমন, ডিভ, প্রাক, পি) দিন এবং সেই উপাদানটিকে নিম্নলিখিত সিএসএস দিন:

some_block_level_tag {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

২) কম্পাস থেকে ফোর্স-র‌্যাপ মিক্সিন ব্যবহার করুন ।

3) আমি কেবল এটিও খতিয়ে দেখছিলাম এবং আমার মনে হয় এটিও কার্যকর হতে পারে (তবে আমার ব্রাউজার সমর্থন আরও সম্পূর্ণরূপে পরীক্ষা করা দরকার):

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

তথ্যসূত্র: মোড়ানো সামগ্রী


হ্যাঁ, সেখানে # 3 সমস্ত আধুনিক ব্রাউজারে এবং এমনকি পুরানো আই 6 ++ এ কাজ করে।
গ্রেইক

1
কথায় কথায় ভেঙে যাওয়ার সুযোগ থাকলে কেবল # 3 কাজ করে। অত্যধিক দীর্ঘ স্ট্রিং ভাঙবে না (ক্রোম 52.0.2743.82 এ পরীক্ষিত)।
কলস্পার

8

আমার যাওয়ার উপায় (যখন বিশেষ অক্ষর সন্নিবেশ করার কোনও অ্যাপ্রোপিয়েট উপায় নেই) CSS এর মাধ্যমে:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

যেমনটি এখানে পাওয়া গেছে: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-used-css/ এর সাথে আরও কিছু গবেষণা খুঁজে পাওয়া যাবে।


5

জন্য word-wrap:break-word;আমার জন্য কাজ, আমি নিশ্চিত করতে ছিল displayসেট ছিল block, এবং যে প্রস্থ উপাদান এ সেট করা হয়েছিল। সাফারিতে, এটিতে একটি pট্যাগ রাখতে widthহয়েছিল এবং এটি সেট আপ করতে হয়েছিল ex


3

আপনি যদি পিএইচপি ব্যবহার করেন তবে ওয়ার্ড র‌্যাপ ফাংশন এর জন্য ভাল কাজ করে: http://php.net/manual/en/function.wordwrap.php

সিএসএস সমাধানটি word-wrap: break-word;সমস্ত ব্রাউজার জুড়ে সুসংগত বলে মনে হয় না।

অন্যান্য সার্ভার-সাইড ল্যাঙ্গুয়েজে একই ধরণের ফাংশন রয়েছে - বা হাতে তৈরি করা যেতে পারে।

পিএইচপি ওয়ার্ড র‌্যাপ ফাংশন কীভাবে কাজ করে তা এখানে:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

এটি একটি স্ট্রিংটিকে একটি ট্যাগ ট্যাগের সাথে 50 টি অক্ষরে মুড়িয়ে দেয়। 'সত্য' পরামিতি স্ট্রিংটি কাটাতে বাধ্য করে।


শূন্য-প্রস্থের স্থান সন্নিবেশ করানোর জন্য আপনি রেমি এর সমাধানটির সাথে এই দ্রবণটি মিশ্রিত করতে পারেন: শব্দদণ্ড ($ দীর্ঘ প্রবন্ধ, 5, "& # 8203;", সত্য);
এমভি

3
<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

3

<wbr>ট্যাগ ব্যবহার করুন :

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

আমি মনে করি এটি শূন্য প্রস্থের স্থান ব্যবহারের চেয়ে ভাল &#8203;যা আপনি পাঠ্যটি অনুলিপি করার সময় সমস্যার সৃষ্টি করতে পারে।


2

একটি ক্ষেত্রে যেখানে সারণী স্থির আকারের নয়, নীচের লাইনে আমার জন্য কাজ করেছে:

style="width:110px; word-break: break-all;"

1

শুধু আমার জন্য সেটিং widthএবং যুক্ত floatকাজ করেছে :-)

width:100%;
float:left;

এটি একটি সম্পূর্ণ এবং সহজ উত্তর আমি মনে করি যে এই লোকটি মূলত এই সমস্যাটি পোস্ট করেছে তার প্রস্থটি ব্যবহার করা উচিত: 100%; ভাসা সহ: বাম; যে উপাদানটিতে সেই স্ট্রিং রয়েছে এবং তার সমস্যাটি সমাধান করা হবে। তাহলে কেন এই উত্তরটি প্রাসঙ্গিক নয়?
টেকব্রাশ.আরজি

কারণ যে লোকটি এই সমস্যাটি পোস্ট করেছে সে মনে করে না যে আপনার সমাধানটি পাঁচ বছর আগে কাজ করেছে।
পিয়েরে

2
হ্যাঁ, তবে এই ফোরামটি কেবল এই ফোরামটি সম্পর্কে নয় এবং আমার মতো একই সমস্যার মুখোমুখি অন্যান্য লোকেরাও আজ সেখান থেকে উপকার পেতে পারে।
টেকব্রাশ.আরজি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.