<div class="container -column">
<div class="hyphens -shy">
A hyphen will be rend­ered if necessary
</div>
<div class="hyphens">
A hyphen will be rend‐ered even where the line is not broken
</div>
</div>
.hyphens {
hyphens: manual;
margin: 12px 0;
align-self: flex-start;
}
.-shy {
width: 160px;
}
View Compiled
This Pen doesn't use any external JavaScript resources.