CSS Text-Wrapping


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Wrapping long URLs and other text content - Perishable Press</title>
  6. <style type="text/css">
  7. .normal {
  8. white-space: normal; /* default value */
  9. width: 300px; /* specific width */
  10. }
  11. .wrapped {
  12. /* wrap long urls */
  13. white-space: pre; /* CSS 2.0 */
  14. white-space: pre-wrap; /* CSS 2.1 */
  15. white-space: pre-line; /* CSS 3.0 */
  16. white-space: -pre-wrap; /* Opera 4-6 */
  17. white-space: -o-pre-wrap; /* Opera 7 */
  18. white-space: -moz-pre-wrap; /* Mozilla */
  19. white-space: -hp-pre-wrap; /* HP Printers */
  20. word-wrap: break-word; /* IE 5+ */
  21. /* specific width */
  22. width: 300px;
  23. }
  24. pre {
  25. /* general styles */
  26. font: 11px/1.5 Monaco, "Panic Sans", "Lucida Console", "Courier New", Courier, monospace, sans-serif;
  27. border: 5px solid #ccc;
  28. background: #eee;
  29. padding: 10px;
  30. }
  31. p { font: 13px/1.5 Helvetica, Arial, sans-serif; width: 475px; }
  32. </style>
  33. </head>
  34. <body>
  35. <h1>Text-Wrapping Demonstration</h1>
  36.  
  37. <h2>Default Display</h2>
  38. <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>
  39.  
  40. <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>
  41. <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>
  42.  
  43. <h2>Wrapped Content</h2>
  44.  
  45. <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>
  46. <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>
  47. <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>
  48.  
  49.  
  50. <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>
  51. </body>
  52. </html>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.