Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

How to hide text going beyond DIV element using CSS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

My Personal Notes arrow_drop_up
Last Updated : 08 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials