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

Question

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.

Answer 1

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.

Answer 2

hyphens: auto requires the language to be set

article {
  margin: 0 20%;
  text-align: justify;
}

article p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
  <p>Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.</p>
  <p>We all have our own techniques, but one of the most effective techniques is to actually put some text where text goes and some pictures where pictures go to make sure everyone can see the vision you’ve created.</p>
  <p>Coming up with filler text on the fly is not easy, but it is becoming more and more of a requirement. Fortunately, some designers and developers around the web know this and have put together a bunch of text generators to help you present your vision.</p>
  <p>Some are standard (like the always popular ‘Lorem Ipsum’ generators) and some are really fun. Either way, pick one of your favorites from below and start generating text and completing your vision.</p>
</article>

If you try this second snippet in Chrome, Safari and Firefox you'll notice (as you resize the browser window) that Chrome and Safari seem to always break at the first opportunity (in-ternational) whereas Firefox works much more as you would expect; it will break at different locations depending how much space there is on the line.

article {
  margin: 0 20%;
  text-align: justify;
}

article p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<article lang="en">
  <p>International international international international international international international international international international international international international international international international international international international.</p>
  <p>International ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international ab international.</p>
</article>

Because browser support for this seems to be a bit of a minefield, you could always look at a Javascript library called Hyphenopoly which claims to sort this out for all browsers.

However for a simple <div> containing a single word, I think you’re much better off just using the ­ escape sequence to insert a soft hyphen.

Answer 3

You can add a soft hyphen where you'd prefer the text to break:

Inter­national