Open In App
Related Articles

How to hide text going beyond DIV element using CSS ?

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.


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.


    height: 50px;
    width: 100px;
    overflow: hidden;

Example: Here the implementation of the above-explained approach


<!DOCTYPE html>
<html lang="en">
<!-- Adding css -->
    .gfg {
        margin: 50px auto;
        width: 80px;
        height: 30px;
        border: 1px solid red;
        overflow: hidden;
    <div class="gfg">
        GeeksForGeeks Articles


overflow items are hidden

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 08 May, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials