Css перерыв на дефис вместо переполнения

Question

У меня есть текст внутри div с дефисом в нем. Когда div становится маленьким, текст переполняется, а не разбивается на дефис.

Я пробовал немного с word-break и overflow, но не мог понять, как это исправить. Вот пример того, что происходит, и чего я пытаюсь достичь.

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 для дублированного вопроса: Ответы есть данные неверны.

1. Самый лучший (по голосам) ответ предлагает заменить дефисы на ­. Это неверно, поскольку эти дефисы НЕ будут отображаться, когда нет разрыва строки.
2. Второй ответ предполагает wbr, но это не поддерживается во всех броузерах.
3. Третий лучший ответ предлагает css word-wrapping, который не заставляет его разбиваться на дефисы.

Answer 1

использование word-wrap: break-word и будет ломаться, когда больше нет места. а не когда «мы» хотим.

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 из-за вас действительно хотите разорвать только в hyphen вы можете использовать либо ­ или 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

С JQuery, если вы можете использовать:

$(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>