সিএসএসে "শব্দ-বিরতি: ব্রেক-অল" বনাম "শব্দ-মোড়ানো: ব্রেক-শব্দ" এর মধ্যে পার্থক্য কী
উত্তর:
ডাব্লু 3 স্পেসিফিকেশন যা এগুলি সম্পর্কে কথা বলে মনে হচ্ছে এটি word-break: break-allসিজেকে (চাইনিজ, জাপানি এবং কোরিয়ান) পাঠ্যের সাথে একটি নির্দিষ্ট আচরণের প্রয়োজনের জন্য বোঝায়, যেখানে word-wrap: break-wordআরও সাধারণ, সি-কে-সচেতন, আচরণ নয়।
word-breakবর্ণগুলির মধ্যে নরম মোড়ানোর সুযোগগুলি নির্দিষ্ট করে ..." ডাব্লু 3 সি উদাহরণটি সিএলকে পাঠ্য উদাহরণ হিসাবে ব্যবহার করে , তবে এটি এর একমাত্র উদ্দেশ্যে ব্যবহার নয়। word-breakআপনি যখন ধারক প্রস্থে ভাঙতে চান তখন দীর্ঘ স্ট্রিংগুলির (যেমন ইউআরএল বা কোডের লাইনগুলির) সাথে একত্রে ব্যবহার করা সাধারণ - বিশেষত যদি ধারকটি এমন কোনও preউপাদান বা টেবিল সেল হয় যেখানে word-wrapসম্পত্তি প্রত্যাশা অনুযায়ী কাজ না করে ।
word-wrap: break-word সম্প্রতি পরিবর্তন overflow-wrap: break-word
- দীর্ঘ শব্দগুলি পরের লাইনে মুড়ে দেবে।
- বিভিন্ন শব্দ যাতে সামঞ্জস্য হয় তা সমন্বয় করে।
word-break: break-all
- এটি একটি অবিচ্ছিন্ন শব্দ বা বহু শব্দ নির্বিশেষে এগুলি প্রস্থ সীমাটির প্রান্তে ভেঙে দেয়। (অর্থাত্ একই শব্দটির অক্ষরের মধ্যেও)
সুতরাং আপনার যদি অনেকগুলি স্থির আকারের স্প্যান থাকে যা গতিশীলভাবে সামগ্রী পায়, আপনি সম্ভবত ব্যবহার পছন্দ করতে পারেন word-wrap: break-word এইভাবে কেবল অবিচ্ছিন্ন শব্দের মধ্যে বিভাজক হয় এবং যদি এটি অনেক শব্দের সমন্বিত একটি বাক্য হয় তবে স্পেসগুলি অক্ষত শব্দগুলি পেতে সামঞ্জস্য করা হয় (একটি শব্দের মধ্যে বিরতি নেই)।
এবং যদি এটি গুরুত্বপূর্ণ না হয়, উভয় জন্য যান।
এর সাথে word-breakএকটি খুব দীর্ঘ শব্দটি শুরু হওয়া উচিত সেই বিন্দুতে শুরু হয় এবং এটি যতক্ষণ প্রয়োজন ততক্ষণ ভাঙা হচ্ছে
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.তবে, এর সাথে word-wrapএকটি খুব দীর্ঘ শব্দটি শুরু হওয়া উচিত নয় point এটি পরের লাইনে মোড়ানো এবং তারপরে প্রয়োজনীয় হিসাবে দীর্ঘ ভেঙে দেওয়া হবে
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.break-word? আমি বিরক্তিকরভাবে খুঁজে পেয়েছি যে word-breakইউআরএলগুলি ভাঙছে তবে তা নয় word-wrap। উভয়ই break-wordএটি সিএসএস
word-wrapoverflow-wrapএই বিভ্রান্তি এড়াতে সম্ভবত নামকরণ করা হয়েছে ।
এখন আমাদের যা আছে:
ওভারফ্লো-মোড়ানো
ওভারফ্লো-মোড়ানো সম্পত্তি হোক বা না হোক ব্রাউজার অর্ডার ওভারফ্লো প্রতিরোধ একটি অন্যথায় অলঙ্ঘনীয় স্ট্রিং অত্যন্ত দীর্ঘ যখন তার ধারণকারী বক্সে মাপসই শব্দের মধ্যে লাইন ভঙ্গ করতে পারে উল্লেখ করতে ব্যবহৃত হয়।
সম্ভাব্য মান:
স্বাভাবিক : ইঙ্গিত করে যে লাইনগুলি কেবলমাত্র সাধারণ শব্দ বিরতি বিন্দুতে ভেঙে যেতে পারে।
ব্রেক শব্দ : ইঙ্গিত করে যে লাইনে অন্যথায় গ্রহণযোগ্য ব্রেক পয়েন্ট না থাকলে সাধারণত অলঙ্ঘনীয় শব্দগুলি নির্বিচারে বিন্দুতে ভেঙে যেতে পারে।
উত্স ।
শব্দ-বিরতি
শব্দ-বিরতি সিএসএস সম্পত্তি কিনা শব্দের মধ্যে লাইন বিরতি নির্দিষ্ট করতে ব্যবহার করা হয়।
- স্বাভাবিক : ডিফল্ট লাইন ব্রেক নিয়ম ব্যবহার করুন।
- ব্রেক-অল : শব্দ-বিরতিগুলি নন-সিজেকে (চাইনিজ / জাপানি / কোরিয়ান) পাঠ্যের জন্য যে কোনও অক্ষরের মধ্যে সন্নিবেশ করা যেতে পারে।
- সর্বদা রাখুন : সিজেকে পাঠ্যের জন্য শব্দ বিরতি দেবেন না। নন-সিজেকে পাঠ্যের আচরণ সাধারণের মতো।
উত্স ।
এখন আপনার প্রশ্নে ফিরে আসা, ওভারফ্লো-মোড়ানো এবং শব্দ-বিরতির মধ্যে প্রধান পার্থক্য হ'ল প্রথমটি একটি ওভারফ্লো পরিস্থিতি সম্পর্কে আচরণ নির্ধারণ করে, পরে পরবর্তীকালে কোনও পরিস্থিতি স্বাভাবিক আচরণের উপর নির্ভর করে (কোনও ওভারফ্লো হয় না)। পাঠ্য ধারণ করার জন্য ধারকটির পর্যাপ্ত জায়গা না থাকলে একটি ওভারফ্লো পরিস্থিতি ঘটে। এই পরিস্থিতিতে লাইন ভাঙ্গা কোনও উপকারে আসেনি কারণ জায়গা নেই (স্থির প্রস্থ এবং উচ্চতা সহ একটি বাক্স কল্পনা করুন)।
তাই:
overflow-wrap: break-word: ওভারফ্লো পরিস্থিতিতে, শব্দগুলি ভাঙা।word-break: break-all: একটি সাধারণ পরিস্থিতিতে, লাইনের শেষে কেবল শব্দগুলি ভাঙ্গা করুন। একটি ওভারফ্লো প্রয়োজন হয় না।
overflow-wrap/ word-wrapতাদের মোড়ানো না। সম্ভবত কারণ একটি নির্দিষ্ট প্রস্থবিহীন টেবিল ঘরগুলি অতিরিক্ত প্রবাহের পরিবর্তে প্রসারিত হয়। পরিবর্তে, টেবিলটি প্রশস্ত হয়েছে এবং অন্যান্য উপাদানগুলির সাথে সংঘর্ষে। word-breakঅন্যদিকে এটি স্থির করে।
table-layout: fixed;(সম্ভবত একসাথে width/ max-width) এটিকে কাজ করতে পারে overflow-wrap/word-wrapতবে এটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে নির্ভর করে; ঠিক যেমন word-breakআপনি চান তা নাও হতে পারে।
কমপক্ষে ফায়ারফক্সে (ভি 24 হিসাবে) এবং ক্রোমে (ভি 30 হিসাবে), যখন কোনও tableউপাদানের সামগ্রীতে প্রয়োগ করা হয় :
word-wrap:break-word
প্রকৃতপক্ষে দীর্ঘ শব্দগুলিকে মোড়ানো হতে পারে না, যার ফলশ্রুতিতে টেবিলটি তার ধারকটির সীমা অতিক্রম করতে পারে;
word-break:break-all
হবে শব্দ মোড়ানো, টেবিল তার ধারক মধ্যে ঝুলানো স্থাপিত।
table-layout:fixedকরার সময় সারণিটি প্রসারিত না করার জন্য ব্যবহার করতে পারেনword-wrap:break-work
table-layout:fixed
word-wrapসাথে সংযোগে ব্যবহার করার সময়ও এই আচরণটি ঘটে যখন preনা তাদের নির্দিষ্ট প্রস্থ নির্ধারিত হয়। ব্যবহারের word-breakফলে কাঙ্ক্ষিত ফল পাওয়া যায়। আমি উপরের পোস্ট করা একটি মন্তব্যে এই উত্তরটির সাথে লিঙ্ক করেছি কারণ এটি একটি সাধারণ ব্যবহারের ক্ষেত্রে প্রদর্শিত হয়।
এটাই আমি জানতে পারি। এটি সাহায্য করে কিনা তা নিশ্চিত নয় তবে ভেবেছিলাম আমি এটি মিশ্রণে যুক্ত করব।
শব্দ মোড়ানো
উপাদানটি কোনও উপাদানটির জন্য নির্দিষ্ট রেন্ডারিং বাক্সের সীমানা ছাড়িয়ে গেলে বর্তমান রেন্ডারড লাইনটি ভেঙে ফেলা উচিত কিনা তা এই বৈশিষ্ট্যটি নির্দিষ্ট করে (এটি 'ক্লিপ' এবং 'ওভারফ্লো' বৈশিষ্ট্যের উদ্দেশ্যে কিছু ক্ষেত্রে সমান।) এই সম্পত্তিটি কেবলমাত্র প্রয়োগ করা উচিত যদি উপাদানটির ভিজ্যুয়াল রেন্ডারিং থাকে তবে সুস্পষ্ট উচ্চতা / প্রস্থ সহ একটি ইনলাইন উপাদান, একেবারে অবস্থান এবং / অথবা একটি ব্লক উপাদান।
শব্দ-ব্রেক
এই সম্পত্তি শব্দের মধ্যে লাইন ব্রেকিং আচরণ নিয়ন্ত্রণ করে। এটি বিশেষত যখন উপাদানের মধ্যে একাধিক ভাষা ব্যবহৃত হয় সে ক্ষেত্রে কার্যকর।
word-wrapএবং word-breakযার উভয়েরই মূল্য থাকতে পারেbreak-word
একটি বিশাল পার্থক্য আছে। break-allপাঠযোগ্য পাঠ্য রেন্ডারিংয়ের জন্য মূলত অব্যর্থ।
ধরা যাক This is a text from an old magazineআপনি একটি পাত্রে স্ট্রিং পেয়েছেন যা প্রতি সারি প্রতি 6 টি অক্ষর ফিট করে।
word-break: break-all
This i
s a te
xt fro
m an o
ld mag
azineআপনি দেখতে পাচ্ছেন ফলাফলটি ভয়াবহ। break-allপ্রতিটি সারিতে যতগুলি চরিত্রকে যথাসম্ভব ফিট করার চেষ্টা করবে, এটি এমনকি একটি 2 অক্ষরের শব্দটিকে "স" এর মতো 2 সারিতে বিভক্ত করবে! এটা হাস্যকর. এ কারণেই break-allখুব কমই ব্যবহৃত হয়।
word-wrap: break-word
This
is a
text
from
an old
magazi
nebreak-wordকেবলমাত্র সেই শব্দগুলিকেই ভেঙে দেবে যা কন্টেইনারটি ফিট করার জন্য খুব দীর্ঘ হয় ("ম্যাগাজিন" এর মতো, এটি 8 টি অক্ষর, এবং ধারকটি কেবল 6 টি অক্ষরের সাথে খাপ খায়)। এটি এমন শব্দগুলিকে কখনই ভাঙবে না যা পুরোপুরি ধারকটিকে ফিট করতে পারে, পরিবর্তে এটি তাদেরকে একটি নতুন লাইনে ঠেলে দেবে।
<div style="width: 100px; border: solid 1px black; font-family: monospace;">
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>
<hr>
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</divword-break:break-all :
সীমান্ত অব্যাহত রাখার জন্য শব্দটি তখন নতুন লাইনে break
word-wrap:break-word :
প্রথমে, শব্দটিকে নতুন লাইনে মোড়ুন তারপর সীমান্তে চালিয়ে যান।
উদাহরণ:
div {
border: 1px solid red;
width: 200px;
}
span {
background-color: yellow;
}
.break-all {
word-break:break-all;
}
.break-word {
word-wrap:break-word;
}<b>word-break:break-all</b>
<div class="break-all">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>
<b> word-wrap:break-word</b>
<div class="break-word">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>সম্পর্কিত ডাব্লু 3 সম্পর্কিত স্পেসিফিকেশন থেকে - যা প্রসঙ্গের অভাবের কারণে বেশ অস্পষ্ট হতে পারে - নিম্নলিখিতটি কেটে নিতে পারে:
word-break: break-allসিজেকে (চাইনিজ, জাপানি বা কোরিয়ান) চরিত্র রচনায় বিদেশী, সি-সি-কে (পশ্চিমা বলুন) শব্দ ভাঙার জন্য।word-wrap: break-wordএকটি মিশ্র-বিহীন (আসুন আমরা পশ্চিমা বলতে পারি) ভাষায় শব্দ ভাঙ্গার জন্য।
কমপক্ষে, এগুলি ডব্লু 3 এর উদ্দেশ্য ছিল। আসলে যা ঘটেছিল তা ফলস্বরূপ ব্রাউজারের অসুবিধাগুলি সহ একটি বড় মোরগ-আপ। জড়িত বিভিন্ন সমস্যার একটি দুর্দান্ত রচনা আপ এখানে ।
নিম্নলিখিত কোড স্নিপেট ক্রস ব্রাউজার পরিবেশে CSS ব্যবহার করে শব্দ মোড়ানো অর্জনের সংক্ষিপ্তসার হিসাবে পরিবেশন করতে পারে:
-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;আগের মতামত ছাড়াও ব্রাউজার সমর্থন এর word-wrapচেয়ে কিছুটা ভাল বলে মনে হয় word-break।