How to word-wrap long text in HTML?

In HTML a very long text is not automatically wrapped. Especially if there are no spaces in your string your browser doesn’t necessarily know where it should break the line.

no-wrap

In most cases you don’t want the people use the horizontal scrollbar to read the entire text but CSS allows you to force the browser to show all the text in multiple lines. CSS offers the properties white-space and word-wrap for this purpose.

div {
    white-space: pre-wrap;      /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap;     /* Opera <7 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;
}

After applying the above rules on your text containers the result looks as follows.

wrap

Different browsers don't handle long text the same way. In firefox the long text got already wrapped without the CSS rules applied. It was able to detect special characters that were url-encoded and broke the lines on these positions.

firefox-wrap

Nonetheless you should never rely on this automatic detection but teach every browser that you really want to wrap so that you get the same result everywhere.

151 Comments

  1. Heiser a typically chosen body for school buses showing Kenworth chassis,
    could later be purchased Foundry Company and by Pacific Auto in 1937.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>