When using soft hyphen, break between words if possible

Question

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.