How to hide text going beyond DIV element using CSS ?
In this article, we will learn how to hide text going beyond DIV element using CSS. This problem basically occurs when the height and width of DIV element are small such that all the text can not be fitted in that DIv.
TEXT GOING OUT
Here, the area of DIV element is shown by the red border, and we can clearly see that text is going beyond it.
We can solve this problem by using CSS overflow property.
overflow: hidden;
hidden – The overflow is clipped, and the rest of the content will be invisible.
Example:
.gfg{
height: 50px;
width: 100px;
overflow: hidden;
}
Code Implementation:
HTML
<!DOCTYPE html> <html lang="en"> <!-- Adding css --><style> .gfg { margin: 50px auto; width: 80px; height: 30px; border: 1px solid red; overflow: hidden; } </style> <body> <div class="gfg"> GeeksForGeeks Articles </div> </body> </html> |
Output:
overflow items are hidden
.png)
.png)