Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to prevent long words from breaking my div?
Sometimes, developers require to show long words on the web page. For example, show URLs, long file names, etc. Sometimes, the word length is greater than the parent container's width, and the word breaks the container, causing layout issues and poor visual appearance.
For example, when creating a card to show file details, if the file name is very long, it can break the card layout. This article demonstrates how to prevent long words from breaking div elements by using CSS word-wrapping techniques.
Understanding the Problem
Let's first understand the problem with a visual example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2rem;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h3>Long words breaking the div</h3>
<div class="container">
<p>This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
A container with fixed width where the long word overflows beyond the container boundaries, breaking the layout.
Method 1: Using the word-break Property
The word-break CSS property allows us to control how words should be broken when they exceed their container's width. It accepts different values like normal, break-all, and keep-all.
Syntax
word-break: break-all;
Example
The following example uses word-break: break-all to break the word at any character
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2rem;
background-color: #f9f9f9;
}
.word-break {
word-break: break-all;
}
</style>
</head>
<body>
<h3>Preventing long words from breaking div</h3>
<div class="container">
<p class="word-break">This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
The long word breaks at any character and wraps to the next line, staying within the container boundaries.
Method 2: Using the overflow-wrap Property
The overflow-wrap property provides more control over word breaking and is generally preferred for better readability as it tries to break words at more natural points.
Syntax
overflow-wrap: break-word;
Example
The following example uses overflow-wrap: break-word to wrap long words
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2rem;
background-color: #f9f9f9;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h3>Using overflow-wrap property</h3>
<div class="container">
<p>This is a verylongwordthatshouldnotbreakinsideadivcontainer.</p>
</div>
</body>
</html>
The long word breaks and wraps to the next line while maintaining better readability compared to word-break.
Method 3: Using JavaScript
You can also apply these properties dynamically using JavaScript, which is useful when handling dynamic content
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2rem;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h3>JavaScript dynamic word wrapping</h3>
<div class="container">
<p class="long-text">Thisisaverylongwordthatshouldnotbreakinsideadivcontainer.</p>
</div>
<script>
let longText = document.querySelector('.long-text');
longText.style.overflowWrap = 'break-word';
</script>
</body>
</html>
The JavaScript code dynamically applies overflow-wrap property, and the long word wraps properly within the container.
Conclusion
Both word-break and overflow-wrap properties effectively prevent long words from breaking div layouts. Use overflow-wrap: break-word for better readability, as it breaks words more naturally than word-break: break-all.
2K+ Views
