CSS text overflow is used when we want to show the content in the limited width or height.
CSS text overflow property handles the content when it is too large to show within the block.
Syntax
|
1 |
text-overflow: enter value for overflow |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> p{ border:1px solid yellow; border-radius:20px; padding:10px; white-space: nowrap; width: 12em; overflow: hidden; } p.first-para{ text-overflow: clip; } p.second-para{ text-overflow: ellipsis; } </style> <p class="first-para">This is the HTML paragraph inside the div to show text overflow property. This uses text overflow to handle the text within a block. This is the first paragraph.</p> <p class="second-para">This is the HTML paragraph inside the div to show text overflow property. This uses text overflow to handle the text within a block. This is the second paragraph.</p> |
Output
CSS text overflow values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | clip | Used to clip the text inside block. The value for this is clip. |
| 2 | ellipsis | Used to ellipsis the text inside block. This puts “…” to the end of the text. The value for this is ellipsis. |
| 3 | initial | Used to define as the property initial value. |
| 4 | inherit | Used to define the computed value of property on the elements parent. |
| 5 | unset | Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not. |