Word Wrap

This CSS reference page displays example code that shows how to style tags to create different types of word wrapping.

WordWrap.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's PHP</title>
  </head>
  <body>
    <h3>Default Pre Tag</h3>
    <pre style="width:200px;height:50px;background-color:#E0E080;border:1px solid black;"
      >In the beginning God created heaven, and earth.</pre>
    <h3>White-Space:Normal</h3>
    <pre style="width:200px;height:50px;background-color:#E0E080;border:1px solid black;
      white-space:normal;">In the beginning God created heaven, and earth.</pre>
    <h3>White-Space:Normal</h3>
    <pre style="width:200px;height:50px;background-color:#E0E080;border:1px solid black;
      white-space:normal;">InthebeginningGodcreatedheaven,andearth.</pre>
    <h3>Word-Wrap:Break-Word</h3>
    <pre style="width:200px;height:50px;background-color:#E0E080;border:1px solid black;
      word-wrap:break-word;">InthebeginningGodcreatedheaven,andearth.</pre>
    <h3>Word-Wrap:Break-Word and White-Space:Normal</h3>
    <pre style="width:200px;height:50px;background-color:#E0E080;border:1px solid black;
      white-space:normal;word-wrap:break-word;">InthebeginningGodcreatedheaven,andearth.</pre>
  </body>
</html>

Output

Default Pre Tag

In the beginning God created heaven, and earth.

White-Space:Normal

In the beginning God created heaven, and earth.

White-Space:Normal

InthebeginningGodcreatedheaven,andearth.

Word-Wrap:Break-Word

InthebeginningGodcreatedheaven,andearth.

Word-Wrap:Break-Word and White-Space:Normal

InthebeginningGodcreatedheaven,andearth.