<div class="container -column">
  <div class="hyphens -shy">
    A hyphen will be rend&shy;ered if necessary
  </div>
  <div class="hyphens">
    A hyphen will be rend&hyphen;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
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.