Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, and the word breaks the container.
For example, we created the card to show the file details, and the file name is very long, which can break the card, which always looks worse. So, developers require to prevent the long words from breaking the div element by wrapping the word.
Before we start with the solution, let’s understand the problem via example.
Example 1 (Long Word Breaking the div)
In the example below, we created the div element and added the ‘p’ element inside the div element. Also, we have added the long words in the text of the ‘p’ element.
In CSS, we have set the fixed dimensions of the div element. In the output, users can observe how long a word breaks the div element and overflows from it.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Long words breaking the div in HTML5 </h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Using the Word-break CSS Property to Break Words
In this approach, we will use the ‘word-break’ CSS property to prevent the word from breaking the div element. The ‘word-break’ property allows us to decide how words should be broken when they exceed their container's width.
It takes different values to break the word. The ‘normal’ value breaks the words only at specified breakpoints such as spaces, hyphens, etc. The ‘break-all’ values break a word from any character from where it is overflowing, and the ‘keep-all’ value never breaks the word.
Here, we will use the ‘break-all’ value to break the word from any character.
Syntax
Users can follow the syntax below to use the ‘word-break’ CSS property to prevent long words from breaking the div element.
word-break: break-all;
Example 2 (Preventing Long Word From Breaking the div)
In the example below, we added the long word in the container div element, which we added in the first example. In CSS, we used the ‘word-break’ property with the ‘break-all’ value to prevent the word from breaking the div element.
In the output, we can observe that word breaks from a particular character, showing the remaining character of the word in the next line.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
.long-word {
word-break: break-all;
}
</style>
</head>
<body>
<h2> Preventing the long words breaking the div in HTML5
</h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
Using the Overflow-wrap Property
The ‘overflow-wrap’ property allows us to decide how the content of the element should wrap if it is overflowing from the parent element. We can use the ‘break-word’ value for the ‘overflow-wrap’ property to prevent long words from breaking the div element by wrapping them.
Syntax
Users can follow the syntax below to use the ‘overflow-wrap’ CSS property to wrap the long words.
overflow-wrap: break-word;
Example 3
In the example below, we added the very long word as a text of the ‘p’ element. After that, we used the ‘overflow-wrap’ property with the parent element to wrap the overflowing content in the next line by breaking the word.
In the output, we can see that word is broken from the middle, and it shows the remaining characters in the next line.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
</h3>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Example 4 (Using JavaScript to set Overflow-wrap Property)
Sometimes, we require to prevent long words from breaking div using JavaScript. For example, we get the product data from the database, and if the product name is very long, we can use the ‘overflow-wrap’ property for the particular product to wrap the long product name.
In JavaScript, we can access the HTML element and use the ‘overflowWrap’ property of the style object to prevent long words from breaking the div element.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
</h2>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
<script>
let longWord = document.querySelector('.long-word');
longWord.style.overflowWrap = 'break-word';
</script>
</body>
</html>
Users learned to use different CSS properties to prevent long words from breaking the div element. We used the ‘word-break’ CSS property in the first approach, specifying how the browser should break the word. In the second approach, we used the ‘overflow-wrap’ CSS property that specifies how we should handle the overflow of the content of the div element.
491 Views
