CSS - overflow-wrap Property
CSS overflow-wrap property enables the browser to split a line of text within an unbreakable string to prevent the content from overflowing its container. This property only applies to inline elements.
Possible Values
-
normal − Lines may only break at normal word break points (such as a space between two words).
-
anywhere − Those breaks long word or URL at any point if there are no otherwise-acceptable break points in the line.
-
break-word − This breaks normally unbreakable words at arbitrary points if there are no otherwise acceptable break points in the line.
Applies to
All the HTML elements.
Syntax
overflow-wrap = normal|anywhere|break-word;
CSS overflow-wrap - anywhere Value
The following example demonstrates how the overflow-wrap property can break up a long word, depending on its value −
<html> <head> <style> .container { display: flex; } .overflow-wrap-anywhere { background-color: #2fe262; border: 2px solid #000000; width: 100px; height: 150px; overflow-wrap: anywhere; margin-right: 50px; } .overflow-wrap-break-word { background-color: #2fe262; border: 2px solid #000000; width: 130px; overflow-wrap: break-word; margin-right: 50px; } .overflow-wrap-normal { background-color: #2fe262; border: 2px solid #000000; width: 130px; overflow-wrap: normal; } h4 { text-align: center; color: #D90F0F; } </style> </head> <body> <div class="container"> <p class="overflow-wrap-anywhere"> <strong>overflow-wrap-anywhere</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic. </p> <p class="overflow-wrap-break-word"> <strong>overflow-wrap-break-word</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic. </p> <p class="overflow-wrap-normal"> <strong>overflow-wrap-normal</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic. </p> </div> </body> </html>
CSS overflow-wrap - break-word Value
This example demonstrates how the overflow-wrap, word-break, and hyphens properties can break up a long word, depending on their values −
<html> <head> <style> p { background-color: #2fe262; border: 2px solid #000000; width: 11em; padding: 3px; } .wrap-normal { overflow-wrap: normal; } .wrap-anywhere { overflow-wrap: anywhere; } .wrap-break-word { overflow-wrap: break-word; } .break-all { word-break: break-all; } .hyphens-auto { hyphens: auto; } span { color: #D90F0F; font-size: 20px; } </style> </head> <body> <p> <span>overflow-wrap: normal</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="wrap-normal">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p> <span>overflow-wrap: anywhere</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="wrap-anywhere">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p> <span>overflow-wrap: break-word</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="wrap-break-word">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p> <span>word-break: break-all</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="break-all">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p> <span>hyphens without lang attribute</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p lang="en"> <span>hyphens with English rule</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> <p class="hyphens-auto" lang="fr"> <span>hyphens with French rule</span><br> Lorem Ipsum is simply dummy text of the printing and <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i> repellendus. non-characteristic words, Temporibus autem quibusdam et. </p> </body> </html>
To Continue Learning Please Login
Login with Google