কীভাবে একটি ডিআইভিতে একটি দীর্ঘ কথায় লাইন বিরতি জোর করবেন?

Question

ঠিক আছে, এটি আমাকে সত্যিই বিভ্রান্ত করছে। আমার মতো একটি ডিভের ভিতরে কিছু সামগ্রী রয়েছে:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

যাইহোক, সামগ্রীটি ডিআইভিকে উপচে ফেলেছে (আশানুরূপ হিসাবে) কারণ 'শব্দ' খুব দীর্ঘ।

আমি কীভাবে ব্রাউজারকে এই শব্দটি 'ব্রেক' করতে বাধ্য করতে পারি যেখানে সমস্ত সামগ্রীর ভিতরে থাকা প্রয়োজন?

Comments

: এই প্রশ্ন কটাক্ষপাত stackoverflow.com/questions/2046530/...

— nickf

Answer 1

ব্যবহার word-wrap:break-word;

এমনকি এটি আই 6 এও কাজ করে যা একটি মনোরম আশ্চর্য।

---

word-wrap: break-wordoverflow-wrap: break-word;প্রতি আধুনিক ব্রাউজারে যা কাজ করে তা প্রতিস্থাপন করা হয়েছে । আইই, একটি মৃত ব্রাউজার হওয়ায় এর word-wrapপরিবর্তে চিরতরে অবহেলিত এবং মানহীনতার উপর নির্ভর করবে ।

word-wrapআজকের বিদ্যমান ব্যবহারগুলি এখনও overflow-wrapস্পেসিফিকেশন অনুসারে এটি একটি উপনাম হিসাবে কাজ করে।

Comments

আসলে, শব্দ-মোড়ানো একটি আইই আবিষ্কার। সুতরাং এটি কোনও আশ্চর্যের নয় যে এটি আইই :) তে কাজ করে :)

— সাভাস বেদোভা

এই একটি সারণী কাজ করার জন্য, আপনি আবেদন করার প্রয়োজন হতে পারে table-layout: fixed;টেবিলে

— Serj Sagan

word-wrap: break-wordআমার পক্ষে কাজ করেনি তবে word-break: break-word@ রহুল যেমন নীচে কাজ করেছেন তেমন পরামর্শ দিয়েছেন।

— ইয়ভে

দ্রষ্টব্য: আপনি কেবলমাত্র আই-তে পিতামহীন ডিভিতে দিলে এটি কাজ করবে (ডিভের অভ্যন্তরীণ স্প্যানের দিকে নয়)।

— এসএমএস

Answer 2

আমি ব্রাউজারের সামঞ্জস্যতা সম্পর্কে নিশ্চিত নই

word-break: break-all;

এছাড়াও আপনি <wbr>ট্যাগ ব্যবহার করতে পারেন

<wbr>(শব্দ বিরতি) এর অর্থ: "ব্রাউজারটি এখানে চাইলে লাইন বিরতি sertোকাতে পারে" " এটি ব্রাউজারটি মনে করে না যে একটি লাইন বিরতি প্রয়োজনীয় কিছু ঘটে না।

Comments

সেই শব্দ-বিরতি সম্পর্কে সচেতন হোন: ব্রেক-অল; শব্দগুলি মাঝখানে ভেঙে দিবে যদি এটি এর আগে অন্য শব্দের সাথে একটি লাইনে কোনও অক্ষর ফিট করে তবে শব্দ-মোড়ানো: বিরতি-শব্দ; শব্দগুলিকে একটি নতুন লাইনে নিয়ে যায় এবং কেবলমাত্র শব্দটি ভেঙে দেয় যদি এটি পাত্রে নিজের লাইনের সাথে পুরোপুরি ফিট না হয়। উদাহরণ: jsfiddle.net/4AKhn/1

— alexteg

ব্রেক-অল সব কিছু ভেঙে দেয়। নির্দিষ্ট ক্লাসের সাথে ব্যবহার করা ঠিক আছে যা কেবলমাত্র দীর্ঘ ইউআরএল ইত্যাদি রয়েছে তবে দেহ বা পি দিয়ে নয়

— উপেন্দ্র

আপনি যখন লগ টেবিল ঘরে একটি অনুরোধ ইউআরআই এর মতো কিছু প্রদর্শন করার চেষ্টা করছেন তখন এটি অবশ্যই নিখুঁতভাবে (এবং পছন্দসই) গ্রহণযোগ্য, এবং দৈত্যাকার দীর্ঘ কক্ষের সাহায্যে পুরো টেবিলটি ভাঙ্গা থামানো দরকার। একটি 'শব্দের' মাঝখানে ভাঙা চাওয়া;) যদিও গৃহীত উত্তর এই বিষয়ে বিড়বিড় করে না।

— অবিশ্বাস্য

@ স্কেল্লি ১৯৮৮ তে আইই 12-এর মতো কিছুই নেই

— টাইলার

@ টাইলারএহ আমি এই সম্পর্কে অবগত, 3 বছর পরে আমার এ বিষয়টি দেখানোর জন্য ধন্যবাদ এটি ডাব্লুবিআর ট্যাগের জন্য ডাব্লু 3 স্কুল স্কুল ব্রাউজার সমর্থন চার্টে তালিকাবদ্ধ রয়েছে, যা সমর্থনটিকে "ইন্টারনেট এক্সপ্লোরার / এজ" হিসাবে তালিকাভুক্ত করে এবং সংস্করণ নম্বরটি 12.0 হিসাবে তালিকাভুক্ত করা হয়েছে, এটি আসলে এজ এর প্রথম সংস্করণ is

— স্কেল্লি 1983

Answer 3

এটি একটি 'ক্রস-ব্রাউজার' সমাধানের জন্য গৃহীত উত্তরে যুক্ত করা যেতে পারে।

সূত্র:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

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

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

Comments

আমি এটি ক্রোম / অপেরা এবং সাফারিতে পেয়েছি, তবে এটি ফায়ারফক্স এবং আইই তে পায় নি। এটির সাহায্যে আমি ফায়ারফক্স সমাধান করেছি, তবে আইই এখনও পাত্রে চলে যাচ্ছে (আমার কাছে কেবলমাত্র আলফা-সংখ্যার অক্ষরের একটি দীর্ঘ ফাইল নাম আছে)।

— কামাফেদার

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

— মিলচে প্যাটার্ন

অনুগ্রহ করে নোট করুন যে এটি ungrammatical জায়গায় শব্দ ভাঙে।

@ ব্যবহারকারী 1322720 "ungrammatical" স্থান কি?

— টাইলারহহ

Answer 4

আমি ঠিক একই সমস্যা গুগলিং করছিলাম, এবং আমার চূড়ান্ত সমাধান এখানে পোস্ট করলাম । এটি এই প্রশ্নের সাথেও প্রাসঙ্গিক।

আপনি স্টাইলটি দিয়ে একটি ডিভ দিয়ে এটি সহজেই করতে পারেন word-wrap: break-word(এবং আপনার প্রস্থটিও প্রস্থের প্রয়োজন হতে পারে)।

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

যাইহোক, টেবিলের জন্য , এছাড়াও আপনি আবেদন করতে হবে: table-layout: fixed। এর অর্থ কলামগুলির প্রস্থগুলি এখন আর তরল নয়, তবে কেবলমাত্র প্রথম সারির কলামগুলির প্রস্থের (বা নির্দিষ্ট প্রস্থের মাধ্যমে) এর ভিত্তিতে সংজ্ঞায়িত করা হয়েছে। এখানে আরও পড়ুন ।

কোডের উদাহরণ:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Comments

সারণী সমাধানের জন্য আপনাকে ধন্যবাদ;) তবে, অটো লেআউটে কেন ব্রেক-শব্দটি ব্যবহার করা যায় না তা আমি পুরোপুরি বুঝতে পারি না। যেকোনো পরামর্শ?

— ondObno

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

— সাইমন ইস্ট

width: 100%;এফএফ এবং ক্রোমে আমার পক্ষে কাজ করার একমাত্র উপায় সেটিংস ছিল!

— পুটজি সান

Answer 5

​শূন্য-প্রস্থ স্পেস (জেডডাব্লুএসপি) নামে পরিচিত ইউনিকোড চরিত্রের জন্য এইচটিএমএল সত্তা যা একটি অদৃশ্য চরিত্র যা লাইন-ব্রেকের সুযোগটি নির্দিষ্ট করে। একইভাবে হাইফেনের উদ্দেশ্য একটি শব্দের সীমানার মধ্যে লাইন-ব্রেকের সুযোগটি নির্দিষ্ট করা।

Comments

খুব সুন্দর টিপ! কেবল পরিপূরক হিসাবে: ​একটি সাদা-স্থানের চেয়ে কম অগ্রাধিকার রয়েছে (অর্থাত্ যদি কাছাকাছি কোনও স্থান থাকে তবে লাইনটি পরিবর্তে একটি সাদা-স্পেসে ভেঙে যাবে)।

— সিপিএইচপিথন

<wbr/>ইউনিকোডের সমতুল্য বলে মনে হচ্ছে যা আমি খুঁজছিলাম

— জেনোস

Answer 6

ফ্লেক্সবক্স ব্যবহার করার সময় এবং নির্ভর করার সময় ফায়ারফক্স (v50.0.2) ব্যতীত নিম্নলিখিত বেশিরভাগ প্রধান ব্রাউজারগুলিতে (ক্রোম, আইই, সাফারি আইওএস / ওএসএক্স) ব্যবহার করে নিম্নলিখিতটি ব্যবহার করা হয়েছে width: auto।

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

দ্রষ্টব্য: আপনি যদি অটোপ্রেফিক্স ব্যবহার না করে থাকেন তবে আপনার ব্রাউজার বিক্রেতা উপসর্গ যুক্ত করতে হতে পারে।

স্পেসিংয়ের জন্য ব্যবহার করা পাঠ্যটি অন্যদিকে লক্ষ্য রাখতে হবে যা  মধ্য-শব্দের সাথে লাইন বিচ্ছিন্ন হতে পারে।

Comments

এটাই আমার দরকার ছিল। অন্যান্য সমাধানগুলি প্রস্থের সাথে কাজ করে না: 100%। একটি বিষয় লক্ষণীয়: শব্দ-বিরতি: বিরতি-শব্দ;শব্দ-বিরতি

— jscul

Answer 7

সিএসএস word-wrap:break-word; , ফায়ারফক্স ৩.6.৩ এ পরীক্ষিত

Answer 8

আমি নীচের কোড দিয়ে আমার সমস্যা সমাধান করেছি।

display: table-caption;

Answer 9

অপসারণ white-space: nowrapযদি কিছু থাকে তবে ।

বাস্তবায়ন:

white-space: inherit;
word-break: break-word;

Answer 10

হোয়াইটস্পেস ব্রাউজার দ্বারা সংরক্ষণ করা হয়। প্রয়োজনে পাঠ্য মোড়ানো হবে এবং লাইন বিরতিতে

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

ডেমো

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Answer 11

এমডিএন থেকে :

overflow-wrapসিএসএস সম্পত্তি নির্দিষ্ট করে থাকুক বা না থাকুক ব্রাউজার এর বিষয়বস্তু বক্স সজল থেকে টেক্সট প্রতিরোধ শব্দ মধ্যে লাইন ব্রেক ঢোকান করা উচিত নয়।

এর বিপরীতে word-break, overflow-wrapকেবলমাত্র একটি বিরতি তৈরি করবে যদি একটি সম্পূর্ণ শব্দ উপচে পড়া ছাড়া নিজের লাইনে স্থাপন করা না যায়।

সুতরাং আপনি ব্যবহার করতে পারেন:

overflow-wrap: break-word;

আমি কি ব্যবহার করতে পারি ?

Answer 12

প্রথমে আপনার উপাদানটির প্রস্থ চিহ্নিত করা উচিত। উদাহরণ:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

যাতে পাঠ্যটি যখন উপাদানটির প্রস্থে পৌঁছায়, তখন এটি লাইনগুলিতে বিভক্ত হবে।

Answer 13

হিসাবে @ davidcondrey উত্তর উল্লেখ করা হয়েছে, শুধু ZWSP নয়, বরং লাজুক ­ ­যে খুব দীর্ঘ ব্যবহার করা যেতে পারে, নির্মাণ (মনে জার্মান বা ডাচ) শব্দ আছে ঘটনাস্থলেই ভাঙা আপনি এটা হতে চান। অদৃশ্য, তবে এটি প্রয়োজনীয় মুহুর্তে একটি হাইফেন দেয়, এভাবে শব্দ সংযুক্ত এবং লাইন উভয়কেই পরিপূর্ণ করে রাখে।

এইভাবে লুচ্চাভেনপোলিটিয়েজেন্ট শব্দটি শব্দের উচ্চারণেরlucht­haven­politie­agent চেয়ে দীর্ঘ অংশ হিসাবে উল্লেখ করা যেতে পারে ।
যদিও আমি এটি সম্পর্কে কোনও অফিসিয়াল কখনও পড়ি না, এই নরম হাইফেনগুলি কনস্ট্রাক্টের একক কথায় সরকারী হাইফেনের তুলনায় ব্রাউজারগুলিতে উচ্চ অগ্রাধিকার পেতে পরিচালিত করে ( যদি এর জন্য কিছুটা বাড়তি থাকে তবে)।
অনুশীলনে, কোনও ব্রাউজার নিজেই এত দীর্ঘ, নির্মিত শব্দটি ভাঙ্গতে সক্ষম নয়; ছোট স্ক্রিনগুলির জন্য এটির জন্য একটি নতুন লাইন তৈরি হয় বা কিছু ক্ষেত্রে এমনকি এক-শব্দের লাইনও (যেমন যখন দুটি নির্মিত শব্দ দুটি অনুসরণ করে)।

এফওয়াইআই: বিমানবন্দর পুলিশ অফিসারের পক্ষে এটি ডাচ

Answer 14

শব্দের বিরতি: শব্দ-বিরতির তুলনায় স্বাভাবিকটি ব্যবহার করা ভাল বলে মনে হয়: বিরতি-শব্দ কারণ বিরতি-শব্দের প্রাথমিক বিরতি যেমন ইএন initial

word-break: normal

Answer 15

এটা কর:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

Answer 16

আমাদের স্টাইল এ চেষ্টা করুন

white-space: normal;

Comments

একাধিক প্রশ্নের উত্তরগুলি সদৃশ করা বেশিরভাগ ক্ষেত্রেই প্রত্যাখ্যান করা হয় । এই ক্ষেত্রে এটি উভয় প্রশ্নেরই একটি ভুল উত্তর বলে মনে হচ্ছে। normalডিফল্ট white-spaceমান। আমি মনে করি এটি যুক্ত করার ফলে প্রশ্নের উদাহরণে কোনও প্রভাব পড়বে না। আমি ভুল হয়ে থাকলে আমাকে সংশোধন করুন।

— জেরেমি ব্যাংকগুলি

এটি সিএসএসের তৈরি ওভাররাইডের উপর নির্ভর করে। আমার ক্ষেত্রে, "সাদা-স্থান: স্বাভাবিক" নয় এমন ডিফল্ট সিএসএস শৈলীর ওভাররাইড করতে আমার জেএসএফ উপাদানটিতে "স্টাইল" এ পুনরায় ঘোষনা করতে হয়েছিল;

— বেনিয়ামিন ফুয়েন্তে