<wbr> marks a position with a word break opportunity. A (HTML rendering) web browser might choose to break the word at the given position and start a new line with the reminder of the word. Thus, it is possible to render text content within confines whose width is too small for a word to be printed in its entirity.
When <wbr> kicks in, the word is just broken without using a hyphen to indicate the word break.
In order to also add a hyphen, the ­ (= soft hyphen) entity is needed.
This is demonstrated with the following HTML fragment:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Comparison of <wbr> and &shy;</title>
</head>
<body>
<div style='width:125px;background-color:#ffe;border:1px solid black'>
Is a sentence necessarily incomprehensible if it contains long words?
<p>
Is a sentence nec<wbr>es<wbr>sa<wbr>rily in<wbr>com<wbr>pre<wbr>hen<wbr>si<wbr>ble if it contains long words?
<p>
Is a sentence nec­es­sa­rily in­com­pre­hen­si­ble if it contains long words?
</div>
</body>
</html>
