CSS text-wrap example

By default, the white-space property is set to normal. To get it to wrap in all browsers, use the CSS provided in my CSS text-wrap tutorial. Here are some examples (check out the source code and tutorial for more information).

Default no wrap

Here we are using an ordinary <div> element to display some text that includes a long URL. This is how it looks using the default white-space value of normal:

Lorem ipsum dolor sit amet, http://dowebsitesneedtolookexactlythesameineverybrowser.com/. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Notice how the long URL extends beyond the width of the <div> element. Here is the relevant CSS for this example:

.normal {
	/* default value */
	white-space: normal;
	}

Wrap text via CSS

Here we are using an ordinary <div> element to display some text that includes a long URL. This is how it looks using the styles from my CSS text-wrap tutorial:

Notice how the long URL wraps within the width of the <div> element. Here is the relevant CSS for this example:

.wrapped {
	/* wrap long urls */
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Check out the CSS text-wrap tutorial for this demo.