<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 text-overflow property</title> <style> p { width: 470px; padding: 10px; overflow: hidden; white-space: nowrap; background: #f2f2f2; } p.clipped { text-overflow: clip; } p.ellipses { text-overflow: ellipsis; } </style> </head> <body> <h1>Text-overflow</h1> <h2>This <code>text-overflow</code> property is used to <code>class="clipped"</code>using as content below examples.</h2> <p class="clipped">CSS3 gradients give a versatile option for creating seamless transitions between two or more colors. Previously, we had to utilize photographs to get this look.</p> <h2>Render an ellipsis ("...")</h2> <p class="ellipses">CSS3 gradients give a versatile option for creating seamless transitions between two or more colors. Previously, we had to utilize photographs to get this look.</p> </body> </html>