Advanced Search

Return to Snippet

Revision: 28182
at July 3, 2010 00:21 by j4kp07
Initial Code 
<!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>
Initial URL 
http://perishablepress.com/press/wp-content/online/demos/css-wrap-demo.html
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS Text-Wrapping

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, text

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS