<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.