Css break on hyphen instead of overflowing

Question

I have a text inside a div with a hyphen in it. When the div gets to 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 fix this. 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 there given 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 broswers.
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>