<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>word-break: break-all, syllabic cluster</title>
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An indic syllable cluster should be wrapped as a unit to the next line.">
<meta name="flags" content="should">
<!--
Marking as "should"
because while the spec requires this behavior
about typographic letter units,
it is handwavy about what constitutes one,
and appeals to the UA's knowledge of "the right thing to do" for that language.
-->
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
<link rel='match' href='reference/word-break-break-all-ref-008.html'>
<link rel='author' title='Richard Ishida' href='mailto:[email protected]'>
<style type='text/css'>
.test { word-break: break-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिन्दी हिन्दी हिन्दी</span></div></div>
<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
<script>
var sentenceWidth = document.getElementById('testspan').offsetWidth
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
</script>
</body>
</html>
Codebase Browser
chromium