Tutorial Ref.com

Word Wrap CSS with FireFox 3.x & Safari 3.x:Using Block Element <pre> Tag

Tutorial Ref >> CSS Tutorials >> Word Wrap CSS Firefox & Safari with <pre> Tags

Date modified - May 25, 2009

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

Solution #1:

White-space:Pre-wrap;Width:600px;

			This is a bunch of text to show 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 pre tag is specifically using white-space with 'pre-wrap' attribute. The CSS property to note has the white-space property with its value set to 'pre-wrap' and a width property with the value set to '600px'.
		

1
2
3
<pre style="border:1px solid silver;padding:3px;white-space:pre-wrap;width:600px;">
            This is a bunch of text to show 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 pre tag is specifically using white-space with 'pre-wrap' attribute. The CSS property to note has the white-space property with its value set to 'pre-wrap' and a width property with the value set to '600px'.
</pre>

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

Displays CSS properties for Firefox and Safari word wrapping with pre tags: white-space:pre-wrap;width:600px;

Solution #2:

White-space:Pre-wrap

			This is a bunch of text to show 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 pre tag is specifically using white-space with 'pre-wrap' attribute. The CSS property to note has the white-space property with its value set to 'pre-wrap' and no width property value set; thus, the width property value is set to 'auto' by default.
		
1
2
3
<pre style="border:1px solid silver;padding:3px;white-space:pre-wrap;">
            This is a bunch of text to show 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 pre tag is specifically using white-space with 'pre-wrap' attribute. The CSS property to note has the white-space property with its value set to 'pre-wrap' and no width property value set; thus, the width property value is set to 'auto' by default.
</pre>

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

Displays CSS properties for Firefox and Safari word wrapping with pre tags: white-space:pre-wrap;

Solution #3:

White-space:Normal;Width:600px;

			This is a bunch of text to show how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This pre tag is specifically using white-space with 'normal' attribute. This is present within the <pre> tags. This has the white-space property with its value set to 'normal' and width set to '600px'. Note the difference in the white-space property when setting the values: 'pre-wrap' and 'normal'. The 'normal' value aligns the text to the left. The 'pre-wrap' displays the <pre> tag settings properly. In other words, if the text is indented in the <pre> tag then 'pre-wrap' will display the indents as such.
		
1
2
3
<pre style="border:1px solid silver;padding:3px;white-space:normal;width:600px;">
            This is a bunch of text to show how css is displayed in various browsers. Let's look at the white-space css property and its attributes. This pre tag is specifically using white-space with 'normal' attribute. This is present within the <code>&lt;pre&gt;</code> tags. This has the white-space property with its value set to 'normal' and width set to '600px'. Note the difference in the white-space property when setting the values: 'pre-wrap' and 'normal'. The 'normal' value aligns the text to the left. The 'pre-wrap' displays the &lt;pre&gt; tag settings properly. In other words, if the text is indented in the &lt;pre&gt; tag then 'pre-wrap' will display the indents as such.
</pre>

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

Displays CSS properties for Firefox and Safari word wrapping with pre tags: white-space:normal;width:600px;

TutorialRef.com - tutorials, guides, how-tos, helps