The following examples show how the wordWrap property can be used to break one long word into multiple words on multiple lines. The break-word value avoids horizontal scrolling and can be useful for printing.
Note that the "P" elements in the examples have layout because their widths are set.
These examples shows the break-word value of the wordWrap property.
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
blonde
These examples show the normal value of the wordWrap property. In quirks mode (transitional DOCTYPE), the field width is extended to fit the word.
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
blonde
These examples show the break-word value of the wordWrap property with white-space:nowrap.
Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word
blonde
To clip unwrapped text to the space provided, you can use overflow:hidden and text-overflow:ellipsis.
[Right-click in window to view the full source code.]