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 the CSS text-wrap tutorial. Here are some examples (see the source code and tutorial for more information).

Default no wrap

Here we are using the <pre> element to display 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 <pre> element.

Wrap text via CSS

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

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 wraps within the width of the <pre> element.