| <!DOCTYPE html> |
| <style> |
| dt { |
| float: left; |
| width: 19ch; |
| } |
| dd { |
| margin-left: 20ch; |
| } |
| div { |
| border: thick solid blue; |
| width: 8ch; |
| font-family: 'Courier New'; |
| } |
| .ahem { |
| font-family: ahem; |
| } |
| </style> |
| <body lang="en-us"> |
| <dl> |
| <dt>hyphens |
| <dd><div>hyphen-<br>ation is</div> |
| <dd><div>hyphen-<br>ation</div> |
| <dt>hyphens break-word |
| <dd><div>hyphen-<br>ation is</div> |
| <dd><div>hyphen-<br>ation</div> |
| <dt>hyphens break-all |
| <dd><div>hyphen-<br>ation is</div> |
| <dd><div>hyphen-<br>ation</div> |
| <dt>hyphens break-all break-word |
| <dd><div>hyphen-<br>ation is</div> |
| <dd><div>hyphen-<br>ation</div> |
| <dt>break-word |
| <dd><div class="ahem">XXXXXXXX<br>)</div> |
| <dt>break-all |
| <dd><div class="ahem">XXXXXXX<br>X)</div> |
| <dt>break-all break-word |
| <dd><div class="ahem">XXXXXXX<br>X)</div> |
| </dl> |
| </body> |
