Wrap the contents of the pre into a line (go)

The <pre> element defines the text that is pre-formatted. Text that is enclosed in the pre element usually retains spaces and line breaks. The text is also rendered as an equal-width font.

A common application of <pre> tags is to represent the source code of the computer.

One of the problems that we often encounter is that if a code encounters a picture or a web address, it makes the code very long, resulting in the page being stretched or the code out of bounds. Very uncomfortable, if using Overflow:hidden then will be the original code hidden, with Overflow:auto will appear scroll bar, code is not easy to read.

Click to view:http://www.css88.com/demo/pre/index-1.html

Today's tossing a night finally fix <pre> content auto-wrap issues:

1. Try it first: Word-wrap:break-word, wrap the content, Ie,op,chrome,safari, FF is tragic.

Click to view:http://www.css88.com/demo/pre/index-2.html

2. View the default browser style for the pre:

XMP, Pre, plaintext {  display:block;  font-family:-moz-fixed;  White-space:pre;  Margin:1em 0;}

Have this white-space:pre to see the value of White-space:

value	Description
Normal	Default. The blank will be ignored by the browser.
Pre	The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.
NoWrap	The text does not wrap, and the text continues on the same line until the <br> tag is encountered.
Pre-wrap	Preserves the sequence of whitespace characters, but wraps them normally.
Pre-line	Merges a sequence of whitespace characters, but preserves newline characters.
Inherit	Specifies that the value of the White-space property should be inherited from the parent element.

There is a pre-wrap, which preserves the sequence of whitespace characters, but wraps them normally.

This is OK, we just add the style:

Pre {White-space:pre-wrap;word-wrap:break-word;}

The content of <pre> can be automatically changed.

Click to view:http://www.css88.com/demo/pre/

Wrap the contents of the pre into a line (go)