Break on hyphen instead of overflowing

Question

I have a text inside a div with a hyphen in it. When the div gets too small, the text overflows instead of breaking at the hyphen.

I tried a bit with word-break and overflow, but couldn't figure out how to make the text break only at the hyphen. Here is an example of what is happening, and what I am trying to achieve.

div{
  width:70px;
  border:1px solid;
}

<b>How it is now </b>
<div> bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div> bla bla-<br>blablabla</div>

Edit for the duplicate question: The answers given there are wrong.

1. The best (by votes) answer suggests replacing hyphens by ­. This is incorrect, since those hyphens will NOT show up when there is no line break.
2. The second answer suggests <wbr>, but this is not supported in all browsers.
3. The third best answer suggests CSS word-wrapping, which does not make it break at hyphens.

Answer 1

use word-wrap: break-word and will break when there is no more space. not when "we" want.

div {
  width: 70px;
  border: 1px solid;
}
div:first-of-type {
  word-wrap: break-word
}

<b>How it is now </b>
<div>bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div>bla bla-
  <br>blablabla</div>

UPDATE due to you really want to break only in hyphen you can use either ­ or wbr

div {
  width: 70px;
  border: 1px solid;
}

<b>How it is now </b>
<div>bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div>bla bla-
  <br>blablabla</div>

<hr />
<b>How it is now using &amp;shy;</b>
<div>bla bla&shy;blablabla</div>
<br>

<b>How it is now using wbr</b>
<div>bla bla-<wbr>blablabla</div>
<br>

Answer 2

With jquery if you can use:

$(function() {
$('div').each(function() {
  $(this).html($(this).text().replace(/-/, '-<br>'));
});
});

div{
  width:80px;
  border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> bla bla-blablabla blablabla-blabla</div>

UPDATE

$('div').each(function() {
  $(this).html($(this).text().replace(/-/g, '<span></span>'));
});

div{
  width:80px;
  border:solid 1px red;
}

span:after{
  content:"-";
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> bla bla-blablabla babababs sbba-blabla</div>