Text-Wrapping Demonstration

Default Display

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. Examine the source code of this page for complete information.

Wrapped Content

Here we are using the <pre> element to display text that includes a long URL. This is how it looks using the code solution found here:

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. Examine the source code of this page for complete information.

Learn more at Perishable Press.