The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be either clipped, or rendered as an ellipsis (...):
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } </style> <body> <h3>Paragraphs with text too long for the box.</h3> <p>Text-overflow: clip:</p> <p class="test1">This is some long text that will not fit in the box</p> <p>Text-overflow: ellipsis:</p> <p class="test2">This is some long text that will not fit in the box</p> </body> |
Paragraphs with text too long for the box.Text-overflow: clip: This is some long text that will not fit in the box Text-overflow: ellipsis: This is some long text that will not fit in the box |
