How to wrap or break a word which already includes multiple hyphens in CSS?

Question

I'm looking to wrap or break a word that has multiple hyphens like "face-to-face" or "all-or-nothing". Those kinds of words and expression do not seem to break naturally in HTML.

The only success I had when trying different combinations was with word-break:break-all but it does not break the word on any hyphens and often leave a letter alone on one line.

Here's an example:

<style>
.two-hyphens {
width: 10px;
font-size: 40px;
border: 1px solid #000;
}
</style>

<div class="two-hyphens">
Face to face
<br><br>
Face-to-face
</div>

Answer 1

Try the following:

.breakAtHyphen {
  word-break: keep-all;
}

Make sure you assign this class to your tag containing the text.

Here's a resource that should help with understanding the word-break property: CSS Word-Break Property

Answer 2

have you tried using javascript or jquery? try to use replace to replace -

Answer 3

I found that wrapping the hyphen in a div with display:inline-block properties seems to be doing the trick.

face<div style="display: inline-block;">-</div>to<div style="display: inline-block;">-</div>face<br>

Still I wonder if there are better ways to do this.