enavu webdevmania tutsvalley psdestination
visit the enavu network
No Comments Article Title Overlay

The CSS Pre Wrap Trick

Quick CSS Tip on how to make the pre tag wrap the text inside of it.

I have had to use this only twice in my career as a web developer… but both times this saved my life. Here is the problem, we need to use the pre tag sometimes to have preformatted text display the [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Quick CSS Tip on how to make the pre tag wrap the text inside of it.

I have had to use this only twice in my career as a web developer… but both times this saved my life. Here is the problem, we need to use the pre tag sometimes to have preformatted text display the way it should… but the pre tag makes it not warp (display on a new line if the width is less than the text on the line). So here is the fix for all browsers.

pre {
white-space: pre-wrap;       /* css-3 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5+ */
white-space: -moz-pre-wrap;  /* Older Versions of Mozilla */
}

Enjoy,

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
  2. 10 Awesome jQuery and JavaScript Snippets
  3. Detect the browser visitor is using with jQuery
  4. jQuery focus on first field trick
  5. Top 10 CSS Snippets

Did you absolutely LOVE this article... share it!

Comments

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting