এইচটিএমএলে পাঠানো মোড়কে কীভাবে শব্দ করবেন?

Question

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaএকটি div(বলুন 200px) এর প্রস্থের চেয়ে বেশি পাঠ্যগুলি কীভাবে মোড়ানো যায়?

আমি যে কোনও ধরণের সমাধান যেমন সিএসএস, জিকুয়েরি ইত্যাদির জন্য উন্মুক্ত

Answer 1

এটা চেষ্টা কর:

div {
    width: 200px;
    word-wrap: break-word;
}

Comments

আমি কি ভুল করছি বা শব্দ-মোড়ানো একটি CSS3 স্বীকৃতি?

— গ্যাব রয়ের

এটি CSS3, তবে এটি IE5.5 -> 9 - caniuse.com/#search=word-wrap

— জোন হ্যাডলি

যখন শব্দ-মোড়ানো: বিরতি-শব্দ; শব্দ বিরতি চেষ্টা করে না: ব্রেক-অল; / * এটি হত্যাকারী * /

— রেডোচকা ২

@ রেডোচকা তবে word-break: break-all;সাধারণ পাঠ্যে এটি ব্যবহার করার সময় এটি মাঝখানে শব্দগুলি ভেঙে দেয় যা কুৎসিত ... আমরা কি উভয় আচরণের মিশ্রণ রাখতে পারি না?

— পাওয়াময়

গুরুত্বপূর্ণ: এটি word-break: break-allএবং না word-wrap: break-all। সহজেই ভুল করা

— সিমোন_উইভার

Answer 2

বুটস্ট্র্যাপ 3 এ, শ্বেত-স্থানটি 'নওর্যাপ' হিসাবে সেট করা নেই তা নিশ্চিত করুন।

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Comments

গ্রেট। আমি শব্দ-বিরতি: ব্রেক-অল একটি টুইটার বুটস্ট্র্যাপ 3 প্যানেলের মূল অংশে ব্যবহার করার চেষ্টা করেছি কিন্তু এটি কখনই কার্যকর হয়নি। সাদা স্থান যুক্ত: স্বাভাবিক ছিল স্থির।

— কুলবয়জুলস

সুন্দর, white-space: normal;এটি কাজ করার আগে আমার খুব দরকার ছিল ।

— র‌্যাডবিক্স

Answer 3

আপনি এর মতো নরম হাইফেন ব্যবহার করতে পারেন:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

এটি হিসাবে প্রদর্শিত হবে

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

যদি সম্বলিত বাক্সটি যথেষ্ট পরিমাণে বড় না হয় তবে

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

যদি হয়।

Comments

কিন্তু আপনি কোথায় রাখবেন কোথায় জানবেন ­?

— কোস্টাস

আপনি এটি দীর্ঘ শব্দে রেখেছেন যেখানে তারা বিভক্ত হতে পারে। এমনকি আপনি উপযুক্ত অভিধান থেকে স্বয়ংক্রিয়ভাবে সেই তথ্যটি পেতে পারেন।

— কিম স্টেবল

তবে উদাহরণের মতো গীবির সম্পর্কে কীভাবে? এটি পরিবর্তন aaaaaa...aaaaaকরা ঠিক আছে a­a­a­a­a­a­a...a­a­a­a?

— কোস্তাস

ঠিক আমি খুঁজছেন ছিল কি. আমি এটি পছন্দ করি যে এটি করা পর্যন্ত খুব লজ্জাজনক ;-)

— w00t

শব্দটি মোড়ানোর জন্য যদি এটি একটি overly.long.java.package.name বা অনেকগুলি বিন্দু সহ কিছু অনুরূপ স্ট্রিং হয় তবে এটি সূক্ষ্ম কাজ করে। তারপরে আপনি & লজ্জা যুক্ত করতে পারেন প্রতিটি বিন্দু পরে

— ডকস্পার

Answer 4

   div {
    // set a width
    word-wrap: break-word
}

' word-wrap' সমাধানটি কেবলমাত্র আইই এবং ব্রাউজারগুলিকে সমর্থন করে CSS3।

সর্বোত্তম ক্রস ব্রাউজার সমাধানটি হ'ল এইচটিএমএল সত্তা লম্বা স্ট্রিংগুলি সনাক্ত করতে এবং তাদের মধ্যে স্থির রাখতে আপনার সার্ভারের সাইড ল্যাঙ্গুয়েজ (পিএইচপি বা যাই হোক না কেন) ব্যবহার করা ​ এই সত্তা দীর্ঘ শব্দগুলি সুন্দরভাবে ভেঙে দেয় এবং সমস্ত ব্রাউজারে কাজ করে।

যেমন

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Comments

"এইচটিএমএল সত্তা # 8203 নিয়মিত বিরতিতে তাদের ভিতরে রাখুন" তবে তারপরে আপনি যখন পাঠ্যটি অনুলিপি করে এটি কোথাও আটকানোর চেষ্টা করবেন তখন আপনার মাঝখানে একটি এলোমেলো ইউনিকোড অক্ষর থাকবে

— ব্যবহারকারী 102008

Answer 5

শব্দের কোনও স্থান নেই (যেমন দীর্ঘ URL হিসাবে) কেবলমাত্র আইই, ফায়ারফক্স, ক্রোম, সাফারি এবং অপেরা জুড়ে কাজ করে:

div{
    width: 200px;  
    word-break: break-all;
}

আমি এটি বুলেট-প্রমাণ হিসাবে পেয়েছি।

Answer 6

এটি আমার পক্ষে কাজ করেছে

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Answer 7

অন্য বিকল্পটিও ব্যবহার করছে:

div
{
   white-space: pre-line;
}

এটি CSS1 সমর্থন করে এমন সমস্ত ব্রাউজারগুলিতে আপনার সমস্ত ডিভ উপাদান নির্ধারণ করবে (যা প্রায় 8 সাধারণ ব্রাউজারগুলিতে IE 8 এর মত)

Comments

যদি তোমার কাছে থাকে একটা <pre> উপাদান আপনি শব্দ মোড়ানো, এই কাজ করে এবং করতে চান word-breakবা word-wrapনা।

— প্লুটো

Answer 8

ক্রস ব্রাউজার

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    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+ */
}

Answer 9

অনুচ্ছেদে এই সিএসএস যুক্ত করুন।

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

Comments

আমি text-overflow:ellipsisপরের লোকের মতোই পছন্দ করি তবে এটি এই প্রশ্নের সঠিক উত্তর নয়। তিনি ওভারফ্লো কেটে না, শব্দ মোড়কে খুঁজছেন।

— স্পুডলি

Answer 10

সিএসএস ট্রিকস থেকে উদাহরণ :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

আরও উদাহরণ এখানে ।

Answer 11

একটি সার্ভার সাইড সলিউশন যা আমার পক্ষে কাজ করে তা হ'ল: $message = wordwrap($message, 50, "<br>", true);যেখানে $messageস্ট্রিং ভেরিয়েবলটি শব্দ / অক্ষরগুলি বিভক্ত করতে হবে। 50 হ'ল যে কোনও বিভাগের সর্বাধিক দৈর্ঘ্য এবং "<br>"আপনি প্রতিটি (50) অক্ষর beোকাতে চান এমন পাঠ্য।

Comments

অক্ষরের প্রস্থের প্রয়োজনীয় সর্বাধিক 200px এর চেয়ে 50 গুণ বেশি হলে এই দ্রবণটি কাজ করবে না। কেবলমাত্র আপনার ব্রাউজারের জুমিং ফাংশনটি ব্যবহার করুন এবং শেষ পর্যন্ত আপনি এটি বিরতি দেখতে পাবেন ...

— ডকসপ্পার

Answer 12

এটা চেষ্টা কর

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

বৈশিষ্ট্যের পাঠ্য-ওভারফ্লো: উপবৃত্ত যোগ করুন ... এবং লাইন-ক্ল্যাম্প লাইনের সংখ্যা দেখায়।

Answer 13

এইচটিএমএল বডি চেষ্টা করুন:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

সিএসএস বডি চেষ্টা করুন:

background-size: auto;

table-layout: fixed;

Answer 14

এটা চেষ্টা কর

div {display: inline;}

Answer 15

আমি বুটস্ট্র্যাপ ব্যবহার করেছি। আমার এইচটিএমএল কোডটি দেখে মনে হচ্ছে ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

সিএসএস

.wrap-text {
     text-align:justify;
}

Comments

বুটস্ট্র্যাপের text-justifyক্লাস রয়েছে, সুতরাং আপনি এটির পরিবর্তে এটি ব্যবহার করতে পারেন.wrap-text

— বার্বসান

Answer 16

আপনি এই সিএসএস ব্যবহার করতে পারেন

p {
  width: min-content;
  min-width: 100%;
}

Answer 17

চেষ্টা করে দেখুন:

overflow-wrap: break-word;

Answer 18

word-wrap:break-wordপ্রয়োজনীয় প্রস্থের সাথে অ্যাট্রিবিউট ব্যবহার করুন । মূলত, পিক্সেলগুলিতে প্রস্থটি দিন, শতাংশে নয়।

width: 200px;
word-wrap: break-word;

Comments

এটি উপরের উত্তরের মতোই। কেন বিরক্ত হও?

— ট্র্যাগ্রাগ্লিয়া