Marusya's School Notes

CSS3 Word Wrapping

The word-wrap property allows long words to be broken and wrap onto the next line. If a word is too long to fit within an area, it expands beyond the element's size, causing scroll bars. The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

HTML file:	Displayed by browser:
<body> <h3>Normal Paragraph</h3> <p>This normal paragraph contains a very long word which has stretched this cell wider than its specified width: thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword. The long word will jump onto the next line. If long enough, it will stretch beyond any specified widths, creating a horizontal scroll bar, rather than be broken.</p> </body>	Normal Paragraph This normal paragraph contains a very long word which has stretched this cell wider than its specified width: thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword. The long word will jump onto the next line. If long enough, it will stretch beyond any specified widths, creating a horizontal scroll bar, rather than be broken.

HTML file:

Displayed by browser:

<body>
<h3>Normal Paragraph</h3>
<p>This normal paragraph contains a very long word which has stretched this cell wider than its specified width: thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword. The long word will jump onto the next line. If long enough, it will stretch beyond any specified widths, creating a horizontal scroll bar, rather than be broken.</p>
</body>

Normal Paragraph

This normal paragraph contains a very long word which has stretched this cell wider than its specified width: thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword. The long word will jump onto the next line. If long enough, it will stretch beyond any specified widths, creating a horizontal scroll bar, rather than be broken.

Both tables (above and below) are width-specified to be 80% of the browser window, while the cell-widths are to be 50% of the table. Only the word-wrap: break-word; (as shown below) stays true to the table's specifications. In the table above, both cells have been stretched by the very long word which caused the scroll bars at the bottom of this window.

HTML file:	Displayed by browser:
<style> p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; } </style> <body> <h3>Word-wrapped: Break-Word Paragraph</h3> <p class="test">This paragraph has a border around its specified width and contains a very long word: thisisaveryveryveryveryveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body>	Word-wrapped: Break-Word Paragraph This paragraph has a border around its specified width and contains a very long word: thisisaveryveryveryveryveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

HTML file:

Displayed by browser:

<body>
<h3>Word-wrapped: Break-Word Paragraph</h3>
<p class="test">This paragraph has a border around its specified width and contains a very long word: thisisaveryveryveryveryveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>

Word-wrapped: Break-Word Paragraph

This paragraph has a border around its specified width and contains a very long word: thisisaveryveryveryveryveryveryveryveryveryverylongword. The long word will break and wrap to the next line.