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">
<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
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