<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-justify: distribute</title>
<link rel='author' title='Richard Ishida' href='mailto:[email protected]'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test { text-align: justify; text-justify: distribute; }
/* the CSS below is not part of the test */
.test { border: 1px solid blue; margin: 20px; width: 290px; color: blue; font: 24px/24px Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if, on the first line only, the last box is flush with the right edge, and the line is composed of boxes about one third the size of those on the second line, and with small gaps between each.</div>
<div class="test">XXX XXX XXX XXX XXX</div>
</body>
</html>
Codebase Browser
chromium