<style>
    div {
        outline: dashed thin lightblue;
         -webkit-hyphenate-character: "-";
    }
</style>
<p>
    There should be a hyphen at the end of the first line, and it should not
    overflow the box.
</p>
<table cellspacing=0 cellpadding=0>
    <tr>
        <td>
            <div>extraordinar<span>-</span><br>ily</div>
        </td>
        <td style="width: 100%"></td>
    </tr>
</table>
<p>
    The text should not overflow the box.
</p>
<table cellspacing=0 cellpadding=0>
    <tr>
        <td>
            <div>extraordinar<span></span>ily</div>
        </td>
        <td style="width: 100%"></td>
    </tr>
</table>