CSS - overflow-wrap Property

Previous
Quiz
Next

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>
Print Page
Previous
Next
Advertisements