CSS3 से ओवरफ्लो टेक्स्ट कैसे तोड़ें (word-wrap)?

लंबे अविराम टेक्स्ट (बिना स्पेस के URL, लंबे शब्द) को कंटेनर में फिट करने के लिए word-wrap: break-word (अब overflow-wrap: anywhere) उपयोग करें। डिफ़ॉल्ट normal ओवरफ्लो होने देता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    div { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; border: 3px solid #3008c0; }
    div.one { width: 200px; word-wrap: normal; }
    div.two { width: 200px; word-wrap: break-word; }
  </style>
</head>
<body>
  <h1>Div1</h1>
  <div class="one"> Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae. </div>
  <h1>Div2</h1>
  <div class="two"> Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae. </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• word-wrap: normal - डिफ़ॉल्ट, लंबे शब्द ओवरफ्लो करते हैं
• word-wrap: break-word - शब्द तोड़कर अगली पंक्ति पर ले जाता है
• आधुनिक नाम - overflow-wrap: anywhere / break-word
• word-break अंतर - word-break: break-all हर जगह तोड़ता है
• उपयोग मामला - यूजर-जनरेटेड कंटेंट, लंबे URL, कोड स्निपेट