वर्ड-ब्रेक प्रॉपर्टी

word-break प्रॉपर्टी लंबे शब्द के अक्षरों को नई लाइन पर ब्रेक करने की अनुमति देती है, यदि वह शब्द कंटेनर की चौड़ाई में फिट नहीं होता है।

सिंटैक्स

cssसेलेक्टर {
  word-break: break-all | keep-all | normal;
}

वैल्यूज

डिफॉल्ट वैल्यू: normal.

उदाहरण . normal वैल्यू

इस उदाहरण में बहुत लंबा शब्द कंटेनर में फिट नहीं होगा और उसकी सीमाओं से बाहर निकल जाएगा (इसके साथ ही नई लाइन से शुरू होगा):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

उदाहरण . break-all वैल्यू

और अब वे अक्षर जो फिट नहीं हो रहे थे, बस अगली लाइन पर ब्रेक हो जाएंगे:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

यह भी देखें