overflow-wrap प्रॉपर्टी

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

सिंटैक्स

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

वैल्यूज

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

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

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

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

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

Результат:

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

और अब वे अक्षर जो फिट नहीं हो रहे थे, बस अगली लाइन पर लपेट दिए जाएंगे (हालांकि लंबा शब्द फिर भी नई लाइन से ही शुरू होगा):

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

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

Результат:

यह भी देखें