How to hide text going beyond DIV element using CSS ?

Last Updated : 08 May, 2023

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>