Friday, 18 January 2013

<PRE> tags and white-space: pre style

When you need to preserve tab characters and line breaks within HTML elements other than multiline input fields, you can use the <pre> tag or the style attribute of white-space: pre.

Just noticed that there is a slight difference in using a <pre> tag and a div with the white-space: pre style attribute applied to it. As the default user agent setting for the font-family style attribute for a <pre> tag is mono

clip_image001

Found more of a description on this site... http://www.quirksmode.org/css/whitespace.html#t01

clip_image002

Use Plunkr to test it out if you like....

http://plnkr.co/edit/dqJKnD?p=preview

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Awesome Game</title>
  <head>
 
  <body>
  <pre>Test this wer awereaw
   
    waerwearaw
    waeraw
    w
   
  </pre>
  <div id='content' style="white-space:pre">Content!
   
    waer
   
    weraweraw
    waera
    waer
  </div>
   
  </body>
 
</html>

No comments:

Post a Comment

How to fix blurry images in Google Chrome

Problem When browsing sites with thumbnail images, those images appear blurred in Chrome, but not in other browsers such as Internet Explore...