Applying Decorative Styling to the Line, Step 2

Now we need to change the wrapping rules so that characters that are too wide for the container are wrapped onto a new line.

CSS has the word-wrap property for this. It takes the following values: normal and break-word. In the case of normal, words are wrapped onto a new line in accordance with the usual rules (that is, by spaces). And if the value is break-word, the browser will wrap words at the ends of lines that would otherwise not fit in the container.

This is exactly what we need: We will set the desired word wrapping, increase the inter-character distance, and correct the indentation.

It should also be noted that the word-wrap property was originally a proprietary Microsoft extension, and it has been renamed to overflow-wrap in the current draft CSS specification. The name word-wrap is now designated as an “alternative” name.