Skip to content
Related Articles

Related Articles

How to hide text going beyond DIV element using CSS ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 06 Apr, 2021
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!