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 CSS</title>
  </head>
  <body>
    <h3>Default Pre Tag equivalent to White-Space:Pre</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;">
Genesis

In the beginning God created heaven, and earth.</pre>
    <h3>White-Space:Normal</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:normal;">
Genesis

In the beginning God created heaven, and earth.</pre>
    <h3>White-Space:Normal</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:normal;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
    <h3>Word-Wrap:Break-Word</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      word-wrap:break-word;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
    <h3>Word-Wrap:Break-Word and White-Space:Normal</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:normal;word-wrap:break-word;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
		<h3>Word-Wrap:Break-Word and White-Space:Pre-wrap</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:pre-wrap;word-wrap:break-word;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
		<h3>Word-Wrap:Break-Word and White-Space:Pre-line</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:pre-line;word-wrap:break-word;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
		<h3>Word-Wrap:Break-Word and White-Space:Nowrap</h3>
    <pre style="width:200px;height:70px;background-color:#E0E080;border:1px solid black;
      white-space:nowrap;word-wrap:break-word;">
Genesis

InthebeginningGodcreatedheaven,andearth.</pre>
  </body>
</html>

Output

Default Pre Tag equivalent to White-Space:Pre

Genesis

In the beginning God created heaven, and earth.

White-Space:Normal

Genesis

In the beginning God created heaven, and earth.

White-Space:Normal

Genesis

InthebeginningGodcreatedheaven,andearth.

Word-Wrap:Break-Word

Genesis

InthebeginningGodcreatedheaven,andearth.

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

Genesis

InthebeginningGodcreatedheaven,andearth.

Word-Wrap:Break-Word and White-Space:Pre-wrap

Genesis

InthebeginningGodcreatedheaven,andearth.

Word-Wrap:Break-Word and White-Space:Pre-line

Genesis

InthebeginningGodcreatedheaven,andearth.

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

Genesis

InthebeginningGodcreatedheaven,andearth.