CSS Property: word-break
[this page | pdf | back links]
The CSS (CSS3) word-break property indicates the way
in which words can be broken at line ends for scripts that are not Chinese,
Japanese or Korean (“CJK”).
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
break-all
|
Breaks can occur
between any two letters
|
|
keep-all
|
Breaks are prohibited
between pairs of letters
|
|
normal
|
(default value). Words
break at line ends according to usual rules
|
|
Default Value:
|
normal
|
|
JavaScript syntax:
|
e.g. object.style.wordBreak="keep-all"
|
|
Inherited:
|
Yes
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {border: 2px solid red; width: 100px; background-color: yellow}
.x1 {word-break: break-all;}
</style>
</head>
<body>
1. Element with default property
<p>aaa-bbb-ccc-ddd-eee</p>
2. Element set using in-file HTML style
<p class="x1">aaa-bbb-ccc-ddd-eee</p>
3. Element set using JavaScript
<p id="x2">aaa-bbb-ccc-ddd-eee</p>
<script>
document.getElementById("x2").style.wordBreak = "break-all";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyWordBreak() {
var x = document.createElement("DIV"); x.style.wordBreak = "break-all"; return (window.getComputedStyle(x, null).wordBreak == "break-all");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties