`word-break` প্রোপার্টি ব্যবহার করে লম্বা শব্দ কীভাবে ভাঙা হবে তা নিয়ন্ত্রণ করা যায়।
উদাহরণ: ওয়ার্ড ব্রেকিং রুলস
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
span { display: inline-block; font-weight: bold; font-size: 20px; margin-right: 20px; }
div { width: 50px; border: 3px solid #3008c0; margin: 10px; padding: 10px; font-size: 18px; display: inline-block; margin-right: 20px; }
.normal { word-break: normal; }
.break-all { word-break: break-all; }
.break-word { word-break: break-word; }
</style>
</head>
<body>
<h1>ওয়ার্ড ব্রেকিং রুলস উদাহরণ</h1>
<span>NORMAL</span><span>BREAK ALL</span><span>BREAK WORD</span><br />
<div class="normal">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="break-all">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="break-word">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</body>
</html>
কোড ব্যাখ্যা
- normal (ডিফল্ট): শব্দের মাঝপথে ব্রেক করবে না, ওভারফ্লো করবে।
- break-all: যেকোনো অক্ষরে ব্রেক করবে (CJK টেক্সটের জন্য উপযোগী)।
- break-word (deprecated): শব্দ পুরো ফিট না হলে পরবর্তী লাইনে যাবে, তবে আধুনিক ব্রাউজার `overflow-wrap: anywhere` প্রিয় করে।
সंबন্ধিত প্রোপার্টি
`overflow-wrap` (पुरনো নাম `word-wrap`) — শব্দ ভাঙা নিয়ন্ত্রণ করে। `hyphens: auto` — হাইফেনেশন যোগ করে।
