Why doesn't the "hyphens" attribute put a "-" at a line break?

I have the following problem:

I have a simple div container with the text "International" inside. I want the word to break when overflowing the container width.

How do I make it, so that there's a "-" when the word breaks?

I added the attributes "hyphens: auto" and "word-wrap: break-word" to the div container. Now the word does break, but it doesn't add the "-" character when breaking. I also tried adding "hyphenate-character: "-";" but this doesn't seem to help as well.

Apart from mentioned prerequisition of explicit lang attribute (or other mean browser gets language of the element), apparently there is important distinction in letter casing: browses refuse to break words beginning with uppercase letter, presumably because it might be a name where syllable / semantic boundaries between constituents are not known, so it might potentially produce inappropriate division.

p {
  border: 1px solid;
  width: calc(var(--w, 7) * 1ch);
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 1ch 0;
}

figure {
  display: inline-block;
  width: 14ch;
  margin: 0 1ch;
  vertical-align: top;
}

<input type="range" min="0" max="14" value="7" step="0.1" oninput="document.body.style.setProperty('--w',value)"><br>
<figure>
  <p lang="en">extraordinarily international</p>
  <figcaption>Lower case</figcaption>
</figure>
<figure>
  <p lang="en">Extraordinarily International</p>
  <figcaption>Title case</figcaption>
</figure>
<figure>
  <p lang="en">Extra&shy;ordinarily Inter&shy;national</p>
  <figcaption>&amp;shy; between constituents</figcaption>
</figure>
<figure>
  <p lang="en">Ex&shy;tra&shy;or&shy;di&shy;na&shy;ri&shy;ly In&shy;ter&shy;na&shy;ti&shy;o&shy;nal</p>
  <figcaption>&amp;shy; between syllables</figcaption>
</figure>

(Firefox.)

As already mentioned in other answers and comments, if you have control over the HTML document, you can use the soft hyphen (­, &shy, ­ or ­) to take over hyphenation of given word.