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.

204 Comments

  1. Dit is heel belangrijk, zoals een docent zal altijd de
    boodschap gemakkelijker. Meer dan één miljard records bestaan nu in de database en kunnen worden gesorteerd of.
    U kunt uw telecommunicatiebedrijf over eventuele speciale functies die zij hebben op het gebied van kinderveiligheid.

  2. Thanks for the good writeup. It actually was once a entertainment account it.
    Glance complex to far delivered agreeable from you! However, how can we be in contact?

  3. Hi, all the time i used to check webpage posts here in the early hours in the morning, as i enjoy to learn more
    and more.

  4. 3-stone: As the name implies, a three-stone alexandrite ring has three
    stones.

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>