Word Wrap with CSS & PRE tag: IE, Firefox & Safari

To set a word wrap within IE 7.x and Firefox 3.x and Safari 3.x with a <pre> needs to be coded differently. The difference in coding is found between the IE and Firefox/Safari. I found Firefox and Safari are similar to achieve word wrap within the pre tags.

Setting Word Wrap with <pre> Tag in IE 7.x

The main CSS properties to use are:

  • overflow:hidden;
  • word-wrap:break-word;
  • width:600px;

If you set overflow to ‘auto’ then for the browsers IE, Firefox and Safari you’ll have scrollable boxes within the block element. If you don’t wish to have scrollable block elements then set the overflow to ‘hidden’. Please note the word-wrap property with the ‘break-word’ attribute does not work in Firefox and Safari. So in order to use the word-wrap property explicitly in IE only then you will need to set the an IF statement to check for IE (browser check) within the <head> XHTML element.

If you do not set the width property then IE will set it to auto.

The code for the IF statement is as follows:

<!–[if IE]>
<link rel=”stylesheet” href=”<?php echo $webRoot; ?>styles/main_horiz_IE.css” media=”screen” type=”text/css” />
<![endif]–>

View snapshots and to grab the coding for word wrapping with CSS in IE 7.x here:Word Wrap CSS IE

Setting Word Wrap with <pre> Tag in Firefox 3.x and Safari 3.x

The main CSS properties to use are:

  • white-space:pre-wrap;
  • width:600px;

If you do not set the width property, Firefox and Safari will set it to auto.

You may use the following CSS properties as:

  • white-space:normal;
  • width:600px;

The outcome of the white-space property with the ‘normal’ attribute aligns the text to the left within the block element; however, this defeats the purpose of the <pre> tags.

View snapshots and to grab the coding for word wrapping with CSS in Firefox and Safari here:Word Wrap CSS Firefox & Safari

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Share

You must be logged in to post a comment.