<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>
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.