How to hide text going beyond DIV element using CSS ?

Last Updated : 14 Oct, 2024

Hiding text that goes beyond a div element in CSS means preventing the overflowed content from being displayed outside the container’s boundaries. This is done to maintain a clean layout and design consistency without showing excess text outside the designated area.

CSS overflow property

The CSS overflow property controls content that exceeds the boundaries of an element. Using overflow: hidden; hides any overflowing content, while overflow: scroll; or auto; allows scrolling, keeping layouts organized when content exceeds limits.

Syntax

overflow: hidden;

Example: Here The overflow: hidden; CSS property hides any content that exceeds the defined width and height of the container. This prevents text or elements from spilling outside the box boundaries.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>CSS Overflow Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow: hidden;
            /* Hides content that overflows the box */
        }
    </style>
</head>

<body>
    <h3>CSS Overflow: Hidden</h3>
    <div class="box">
        CSS (Cascading Style Sheets) is a language 
        designed to simplify the process of making 
        web pages presentable. It allows you to 
        apply styles to HTML documents, describing 
        how a webpage should look by prescribing colors, 
        fonts, spacing, and positioning. CSS provides 
        developers and designers with powerful control 
        over the presentation of HTML elements.
    </div>
</body>

</html>

Output:

hide text going beyond DIV element Using overflow property

How to read all spans of a div dynamically ?

hritikrommie

Improve

Article Tags :

How to hide text going beyond DIV element using CSS ?

CSS overflow property

Syntax

Similar Reads

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

Thank You!

What kind of Experience do you want to share?