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.

3 Comments

  1. Gaurav

    Nice one

  2. Gaurav

    I need to display the comment
    with the same
    formate as written in the comment box

  3. slopjong

    I’m not sure if I understand you. Can you please describe with more details what you are trying to do?

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>