Skip to content
Related Articles

Related Articles

Improve 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.

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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :