Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to hide text going beyond DIV element using CSS ?

  • Difficulty Level : Medium
  • Last Updated : 06 Apr, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :