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
Selected Reading
How to set line breaking rules for non-CJK scripts in JavaScript?
The word-break CSS property controls how words break when text overflows its container. For non-CJK (Chinese, Japanese, Korean) scripts like English, you can set different line breaking behaviors using JavaScript.
Syntax
element.style.wordBreak = "value";
word-break Property Values
| Value | Description | Use Case |
|---|---|---|
normal |
Default breaking rules | Standard text flow |
break-all |
Break anywhere, even mid-word | Prevent overflow in narrow containers |
keep-all |
Don't break CJK text | Preserve CJK word integrity |
Example: Interactive Word Breaking
<!DOCTYPE html>
<html>
<head>
<style>
#textBox {
width: 150px;
height: 120px;
background-color: lightblue;
border: 1px solid black;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<button onclick="setBreakAll()">Break All</button>
<button onclick="setNormal()">Normal</button>
<div id="textBox">
This is a very long sentence with supercalifragilisticexpialidocious words that might overflow.
</div>
<script>
function setBreakAll() {
document.getElementById("textBox").style.wordBreak = "break-all";
}
function setNormal() {
document.getElementById("textBox").style.wordBreak = "normal";
}
</script>
</body>
</html>
Programmatic Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="demo1" class="container">
Antidisestablishmentarianism is a long word.
</div>
<div id="demo2" class="container">
Antidisestablishmentarianism is a long word.
</div>
<script>
// Apply different word-break values
document.getElementById("demo1").style.wordBreak = "normal";
document.getElementById("demo2").style.wordBreak = "break-all";
console.log("demo1 word-break:", document.getElementById("demo1").style.wordBreak);
console.log("demo2 word-break:", document.getElementById("demo2").style.wordBreak);
</script>
</body>
</html>
Key Points
-
break-allbreaks words at any character to prevent overflow -
normalfollows standard breaking rules (at spaces, hyphens) -
keep-allis primarily for CJK scripts but affects punctuation in all languages - Use
word-wrap: break-wordas an alternative for gentler word breaking
Conclusion
The word-break property provides control over text wrapping behavior. Use break-all for strict container fitting or normal for standard text flow in non-CJK scripts.
Updated on: 2026-03-15T23:18:59+05:30
335 Views
Advertisements