<div>
  <h1>WBR</h1>
  super<wbr>long<wbr>word<wbr>that<wbr>needs<wbr>to<wbr>break<wbr>better
</div>

<div class="wbr">
  <h1>CSS</h1>superlongwordthatneedstobreakbetter
</div>

<div>
  <h1>&amp;shy;</h1>super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
div {
  margin: 0 1rem;
  background: #efefef;
  min-height: 50vh;
  width: 100px;
  overflow: hidden;
  resize: horizontal;
  &.wbr {
      word-break: break-all;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.