Tutorial Ref >> CSS Tutorials >> Word Wrap CSS IE with <pre> Tags

Date modified - May 25, 2009

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

Overflow:Hidden;Word-wrap:Break-word;Width:600px

			This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <pre> tags. This has the overflow property set to 'hidden' and the word-wrap property set to 'break-word'. This word-wrap CSS property set to 'break-word' is needed to work in IE. This has been tested with IE 7.x and greater; however, it has not been tested with IE less than 7.x.
		

1
2
3

<pre style="border:1px solid silver;padding:3px;overflow:hidden;word-wrap:break-word;width:600px;">
            This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <code>&lt;pre&gt;</code> tags. This has the overflow property set to 'hidden' and the word-wrap property set to 'break-word'. This word-wrap CSS property set to 'break-word' is needed to work in IE. This has been tested with IE 7.x and greater; however, it has not been tested with IE less than 7.x.
</pre>

The following image is what you would be viewing if you were viewing this with IE 7.x or greater. Click on the image to view the original image:

Overflow:Hidden;Word-wrap:Break-word;

			This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <pre> tags. This has the overflow property set to 'hidden' and the word-wrap property set to 'break-word'. This word-wrap CSS property set to 'break-word' is needed to work in IE. This one has no width set whereas the above has the width set to 600px. This has been tested with IE 7.x and greater; however, it has not been tested with IE less than 7.x.
		

1
2
3

<pre style="border:1px solid silver;padding:3px;overflow:hidden;word-wrap:break-word;">
            This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <code>&lt;pre&gt;</code> tags. This has the overflow property set to 'hidden' and the word-wrap property set to 'break-word'. This word-wrap CSS property set to 'break-word' is needed to work in IE. This one has no width set whereas the above has the width set to 600px. This has been tested with IE 7.x and greater; however, it has not been tested with IE less than 7.x.
</pre>

The following image is what you would be viewing if you were viewing this with IE 7.x or greater. Click on the image to view the original image. The CSS width is set to 'auto' by default:

Overflow:Auto;Width:600px

			This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <pre> tags. This has the overflow css property with the 'auto' attribute' set.
		

1
2
3

<pre style="border:1px solid silver;padding:3px;overflow:auto;width:600px;">
            This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <code>&lt;pre&gt;</code> tags. This has the overflow css property with the 'auto' attribute' set.
</pre>

The following image is what you would be viewing if you were viewing this with IE 7.x or greater. Click on the image to view the original image:

Overflow:Hidden;Width:600px

			This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <pre> tags. This has the overflow property and the attribute set to 'hidden'.
		

1
2
3

<pre style="border:1px solid silver;padding:3px;overflow:hidden;width:600px;">
            This is the pre tag with the overflow css and This is a bunch of text to show the how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This is present within the <code>&lt;pre&gt;</code> tags. This has the overflow property and the attribute set to 'hidden'.
</pre>

The following image is what you would be viewing if you were viewing this with IE 7.x or greater. Click on the image to view the original image: