word-wrap: break-word (IE, Safari, Firefox 3.5+, Opera 10.5)

Here are two paragraphs side by side with the same narrow width and the same content. Only the first has break-word: its long words not fitting on a line are broken.

Here are two paragraphs side by side with the same narrow width and the same content. Only the first has break-word: its long words not fitting on a line are broken.

 

Unfortunately in IE6 break-word ruins text justification, and text wrapping appears sometimes incorrect. Next six paragraphs have the same width and respectively:

  1. no break-word, left aligned text
  2. no break-word, justified text
  3. no break-word, right aligned text
  4. break-word, left aligned text
  5. break-word, justified text
  6. break-word, right aligned text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Change browser width to check how words wrap...

CSS tests home