In this article, we will learn how to hide text going beyond the DIV element using CSS. This problem basically occurs when the height and width of the DIV element are small such that all the text can not be fitted in that DIv.
TEXT GOING OUT
Here, the area of the DIV element is shown by the red border, and we can clearly see that the text is going beyond it.
We can solve this problem by using the CSS overflow property.
overflow: hidden; hidden - The overflow is clipped, and the rest of the content will be invisible.
Syntax:
.gfg{
height: 50px;
width: 100px;
overflow: hidden;
}Example: Here the implementation of the above-explained approach
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