/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile