Word Wrap

Wrap Text

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:pic1

pic2

 

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:

pic3

pic4

“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.

pic5

pic6

This is a very simple trick, but can be extremely useful in my opinion!

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a comment