CSS HTML

[Solved -10 Answers] CSS – How to wrap text in a pre tag

  • pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how to make the text word-wrap instead of printing out one long line?

CSS:

css code
pre 
{
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

  • This works great to wrap text and maintain white-space within the pre-tag:
css code
pre
{
    white-space: pre-wrap;
}

  • Skipping the pre tag and using white-space: pre-wrap on a div is a better solution.
html code
<div style="white-space: pre-wrap;">content</div>

  • You can either use this:
css code
pre 
{
 white-space: normal; 
}
  • to maintain the monospace font but add word-wrap,

or

css code
pre 
{
 overflow: auto; 
}
  • which will allow a fixed size with horizontal scrolling for long lines.

  • Try this :
css code
  pre 
{
        white-space: pre-wrap;       /* CSS 3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        padding:0px;
        margin:0px
 }

  • You can try using this code :
css code
<pre style="white-space:normal;">. 

  • To get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)

CSS:

css code
xmp
{ 
white-space:pre-wrap; word-wrap:break-word; 
}

HTML:

html code
<xmp> your text or code </xmp>

This is one of the solution :

css code
pre
 {
    white-space: normal;
    word-wrap: break-word;
}

  • Text in <pre> tags doesn’t wrap by default. If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
css code
/* Browser specific (not valid) styles to make preformatted text wrap */pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

  • All you need to do is add this one pieces of code to your stylesheet and your text will wrap nicely.
css code
pre 
{
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
See also  [Solved - 11 Answers] CSS - HTML -How to remove the space between inline-block elements

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment