How to Wrap a Long String Without any Whitespace Character

You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.

In this snippet, you’ll find some examples for block elements, as well as for the inline ones.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solutions with the CSS word-wrap property

In the example below, we set the word-wrap property to its "break-word" value for the <span> element and specify its width. Also, we set the display property to “inline-block”.

Example of wrapping a long string without a whitespace character for inline elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        width: 135px;
        word-wrap: break-word;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

Result

LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum

Example of wrapping a long string without a whitespace character for block elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 100px;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <textarea>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremI
    </textarea>
  </body>
</html>

Here too, we specified the word-wrap and width properties, but for the <textarea> element.

Solution with the CSS overflow-wrap property

In CSS3, the word-wrap property is renamed to overflow-warp. So, consider this when choosing the solution.

Example of wrapping a long string without a whitespace character with the CSS overflow-wrap property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display:inline-block;
        width: 150px;
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>