1

p {
  background-color: #cfe8ff;
}
.short {
  width: 80px;
}
.very-short {
  width: 50px;
}
<p>Stack Over&shy;flow</p>
<p class="short">Stack Over&shy;flow</p>
<p class="very-short">Stack Over&shy;flow</p>
<p class="short">Stack Overflow</p>
<p class="very-short">Stack Overflow</p>

In the second <p>, I would like the line to break at the space, instead of at the soft hyphen. It should only break at the hyphen if breaking at the space is not enough. If I remove the soft hyphen, it works correctly for .short, but not for .very-short.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
  • This https://stackoverflow.com/questions/48209503/show-hyphens-only-when-necessary-soft-hyphens-doesnt-cut-it has some hints, but no perfect answer, though support for the hyphens property is now much better. – A Haworth May 09 '23 at 06:07

0 Answers0