One thing I wanted to learn for my website was how to wrap text for long chunks of text. Previously I went through a paragraph and added a line break, estimating where the lines would look about the same length. With the word-wrap, you can set the width of the line.
Without any breaks or wrapping the text looks like this:
By adding the CSS3 word-wrap property, long words can be broken and wrapped onto the following line. The width of the line can be set with the command “width:” followed by any amount of pixels. This is how it looks set to 200 px:
“Normal” or “break-word” can be specified in the code. Using normal does not allow words to be broken even if the word were to extend outside of the width parameters specified, whereas break-word will cut the word and continue it on the next line to fit within your width.
Prior to using this CSS3 feature, I used the method of adding a break at each line by estimating where the following line would appear even. Using the word-wrap function is more efficient and uses fewer keystrokes as well as ensuring that text will not extend beyond a certain width.
This is a very simple trick, but can be extremely useful in my opinion!