Marusya's School Notes

CSS3 Word Breaking

The CSS3 word-break property specifies line breaking rules. There are two values: keep-all and break-all:

HTML file:	Displayed by browser:
<style> p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; } </style> <body> <p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p> <p class="test2">This paragraph contains some text. The lines will break at any character.</p> </body>	This paragraph contains some text. This line will-break-at-hyphens. This paragraph contains some text. The lines will break at any character.

HTML file:

Displayed by browser:

<body>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

Note: The word-break property is not supported in Opera 12 and earlier versions.