How to hide text going beyond DIV element using CSS ?
Last Updated :
14 Oct, 2024
Improve
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.
<!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:
