EXAMPLE
Run 
<!DOCTYPE html>
<html>

<head>
	<title>The hanging-punctuation property in CSS</title>
	<style type="text/css">
		dd {
	  width: 55px;
	  border: 4px solid red;
	  color: green;
	 }
	dd.none {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	dd.manual {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	dd.auto {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	</style>
</head>

<body>
	<dl> <dt><code>none</code>: auto</dt>
		<dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>:auto</dt>
		<dd lang="en" class="manual">An extreme&shy;ly long English word</dd> <dt><code>auto</code>: auto (if needed)</dt>
		<dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
	</dl>
</body>

</html>