Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I wrap text in a pre tag?

Tags:

html

css

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

like image 340
adambox Avatar asked Oct 29 '08 19:10

adambox


People also ask

How do you break a line in pre tag?

The usual approach is to convert single newlines in the input to “<br />”. (Double-newlines would normally introduce a new “<p>” element.)


2 Answers

The answer, from this page in CSS:

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+ */ } 
like image 76
adambox Avatar answered Oct 07 '22 14:10

adambox


This works great to wrap text and maintain white-space within the pre-tag:

pre {     white-space: pre-wrap; } 
like image 27
Richard McKechnie Avatar answered Oct 07 '22 15:10

Richard McKechnie