Posted By

j4kp07 on 07/03/10

Tagged

css
text

Versions (?)

Last Edited at 07/03/10 12:21am

Statistics

Viewed 585 times

Favorited by 0 user(s)

Related snippets

CSS Text-Wrapping

/ Published in: CSS

Highlighted TextExpand

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Wrapping long URLs and other text content - Perishable Press</title>
		<style type="text/css">
			.normal {
				white-space: normal; /* default value */
				width: 300px;        /* specific width */
				}
			.wrapped {
				/* wrap long urls */
				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+ */
				/* specific width */
				width: 300px; 
				}
			pre {
				/* general styles */
				font: 11px/1.5 Monaco, "Panic Sans", "Lucida Console", "Courier New", Courier, monospace, sans-serif;
				border: 5px solid #ccc;
				background: #eee;
				padding: 10px;
				}
			p { font: 13px/1.5 Helvetica, Arial, sans-serif; width: 475px; }
		</style>
	</head>
	<body>
		<h1>Text-Wrapping Demonstration</h1>

<h2>Default Display</h2>
		<p>Here we are using the <code>&lt;pre&gt;</code> element to display text that includes a long <acronym title="Uniform Resource Locator">URL</acronym>. This is how it looks using the default <code>white-space</code> value of <code>normal</code>:</p>

<pre class="normal">Lorem ipsum dolor sit amet, http://dowebsitesneedtolookexactlythesameineverybrowser.com/. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</pre>
		<p>Notice how the long <acronym title="Uniform Resource Locator">URL</acronym> <em>extends beyond</em> the width of the <code>&lt;pre&gt;</code> element. Examine the source code of this page for complete information.</p>

<h2>Wrapped Content</h2>

<p>Here we are using the <code>&lt;pre&gt;</code> element to display text that includes a long <acronym title="Uniform Resource Locator">URL</acronym>. This is how it looks using the code solution found <a href="http://perishablepress.com/press/2010/06/01/wrapping-content/" title="Wrapping Long URLs and Text Content with CSS">here</a>:</p>
		<pre class="wrapped">Lorem ipsum dolor sit amet, http://dowebsitesneedtolookexactlythesameineverybrowser.com/. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</pre>
		<p>Notice how the long <acronym title="Uniform Resource Locator">URL</acronym> <em>wraps within</em> the width of the <code>&lt;pre&gt;</code> element. Examine the source code of this page for complete information.</p>

<p><a href="http://perishablepress.com/press/2010/06/01/wrapping-content/" title="Wrapping Long URLs and Text Content with CSS">Learn more at Perishable Press</a>.</p>
	</body>
</html>

URL: http://perishablepress.com/press/wp-content/online/demos/css-wrap-demo.html

Report this snippet Tweet