Text overflow happens when an HTML element's content goes beyond the limits of its container. This could break the layout or hide content, which would result in an unpleasant user experience. Using overflow properties, changing the container width, and managing word wrapping and breaking are some of the methods used by CSS developers to prevent text overflow.
These are the following methods:
Table of Content
Using the width property
CSS can stop the text from going beyond the container's defined width by establishing a fixed width for it. Text that is longer than the designated width will either be clipped or wrapped onto the following line, based on the properties of the content and the usual behavior of the browser.
Syntax:
width: auto | value | initial | inherit;Example: The below example will explain how you can utilize the width property to prevent text from overflowing in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Text Overflow Prevention -
Using Width Property
</title>
<style>
.container {
background-color: green;
color: white;
padding: 2px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<p>
GeeksforGeeks (GFG) is a top website that
offers computer science lovers lessons,
coding challenges, instructional materials,
and practice for interviews.
</p>
</div>
</body>
</html>
Output:
Fixing the width to prevent overflow.
Using overflow property
We can utilize the overflow property to regulate the behavior of overflows. It prevents text from overflowing the container and preserves a clean layout by using the overflow: hidden property. Any text that exceeds the container will be hidden from view.
Syntax:
overflow: visible | hidden | scroll | auto | inherit;Example: The below example explains the use of the overflow property to prevent text from overflowing in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Text Overflow Prevention -
Using Overflow Property
</title>
<style>
.container {
background-color: green;
color: white;
padding: 10px;
font-size: 22px;
overflow: hidden;
width: 200px;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<p>
GeeksforGeeks (GFG) is a top website that offers
computer science lovers lessons, coding challenges,
instructional materials, and practice for interviews.
It creates a dynamic community for learning and
mastering computer science and programming
</p>
</div>
</body>
</html>
Output:
Using word-break property
When words are longer than the width of the container, you may adjust how they are broken using the word-break property. It prevents text overflow and maintains a clean layout by using the word-break: break-all property to ensure that even big words or character strings within the text will be broken.
Syntax:
word-break: normal | break-all | keep-all | break-word | initial | inherit;Example: The below code utilizes the word-break property to prevent text from overflowing in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Text Overflow Prevention -
Using Word-Break Property
</title>
<style>
.container {
background-color: green;
color: white;
padding: 10px;
font-size: 22px;
margin: auto;
width: 500px;
height: 200px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<p>
GeeksforGeeks (GFG) is a top website that offers
computer science lovers lessons, coding challenges,
instructional materials, and practice for interviews.
It creates a dynamic community for learning and
mastering computer science and programming
</p>
</div>
</body>
</html>
Output:
Using word-wrap property
When words are longer than the width of the container, you may adjust how they are wrapped using the word-wrap attributes. It prevents text overflow and maintains a clean layout by utilizing the word-wrap: break-word property to ensure that even large words inside the text will be broken.
Syntax:
word-wrap: normal | break-word | initial | inherit;Example: The below code will show the implementation of the word-wrap to prevent text from overflowing in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Text Overflow Prevention -
Using Word-Wrap Property
</title>
<style>
.container {
background-color: green;
color: white;
padding: 10px;
margin: auto;
width: 500px;
height: 200px;
word-wrap: break-word;
font-size: 22px;
}
</style>
</head>
<body>
<div class="container">
<p>
GeeksforGeeks (GFG) is a top website that offers
computer science lovers lessons, coding challenges,
instructional materials, and practice for interviews.
It creates a dynamic community for learning and
mastering computer science along with programming
</p>
</div>
</body>
</html>
Output:
