Saturday, May 24, 2008

preformated <pre> text wrap

Pre tag displays the text "As-Is" typed in the html tag. However some times it doesn't give the desired effect, when the text content is continuous and doesn't have line breaks. Below code-snippet could help in defining the pre tag style to wrap the text and render the remaining starting from next line.
/* 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+ */
}
Reference and more information:
http://www.w3.org/TR/css3-text/#white-space
http://www.w3.org/TR/CSS21/text.html
http://users.tkk.fi/~tkarvine/pre-wrap-css3-mozilla-opera-ie.html

Learning programming

    Programming is an interesting world where you apply your skills to build a software program that comes into life when it is run on a com...