To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for
To force long, continuous strings of text to wrap within the width of our
The comments included in the CSS solution explain which declarations are targeting which browsers. Notice that some of the rules are browser-specific (using vendor-specific prefixes), while others declare standard values from different CSS specifications. The funky
For more complete discussion on text wrapping and all the gruesome details, check out Lim Chee Aun’s excellent post on whitespace and generated content. And, for a complete guide to pimping your site’s
Here again is the demonstration page for this CSS technique.
FROM http://perishablepress.com/wrapping-content/
<pre>
tags):pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
See demonstrationExplanation
By default, thewhite-space
property is set to normal
. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap:To force long, continuous strings of text to wrap within the width of our
<pre>
content (or other block-level element, such as <div>
and <p>
), we need a different value for the white-space
property. Here are our options:- normal – Default value for the
white-space
property. Sequences of whitespace are collapsed to a single whitespace.<pre>
content will wrap at whitespaces according to the width of the element. - nowrap – Sequences of whitespace are collapsed to a single whitespace.
<pre>
content will wrap to the next line ONLY at explicit<br />
elements. - pre – All whitespace is preserved.
<pre>
content will wrap at implicit line breaks. This is the default behavior of the<pre>
element. - pre-line – Sequences of whitespace are collapsed to a single whitespace.
<pre>
content will wrap at whitespaces and line breaks according to the width of the element. - pre-wrap – All whitespace is preserved.
<pre>
content will wrap at whitespaces and line breaks according to the width of the element. - inherit – Value of
white-space
inherited from parent element.
white-space:pre-line
, like so:pre {
white-space: pre-line;
width: 300px;
}
Although the white-space
property is supported by all
major browsers, unfortunately many of them fail to apply the property to
long strings of continuous text. Different browsers will wrap long strings, but they require different white-space
values in order to work. Fortunately, we can apply the required values for each browser by including multiple white-space
declarations in our pre
selector. This is exactly what we are doing with the CSS code solution presented at the beginning of this article.The comments included in the CSS solution explain which declarations are targeting which browsers. Notice that some of the rules are browser-specific (using vendor-specific prefixes), while others declare standard values from different CSS specifications. The funky
word-wrap
property is a proprietary Microsoft invention that has been included with CSS3. And thanks to the CSS forward compatibility guidelines, it’s perfectly fine to include multiple instances of the same property. In a nutshell:- Unrecognized properties are ignored
- For multiple instances of the same property, only the last rule will be applied
For more complete discussion on text wrapping and all the gruesome details, check out Lim Chee Aun’s excellent post on whitespace and generated content. And, for a complete guide to pimping your site’s
<pre>
content, check out my article, Perfect Pre Tags.Here again is the demonstration page for this CSS technique.
FROM http://perishablepress.com/wrapping-content/