JSFiddle - React, Tailwind, and code Playground

HTML

exmaple 1
<div class='container-fix'>
    Short-name Very-long-name
</div>
<hr>
exmaple 2 // ko
<div class='container-fix'>
    Name Long-nword
</div>
<hr>
exmaple 2 // ok
<div class='container'>
    Name Long-nword
</div>

CSS

.container-fix {
    background: pink;
    width: 80px;
    word-wrap: break-word;    
    overflow: hidden;
}
.container {
    background: pink;
    width: 80px;
    //word-break: break-all;    
    overflow: hidden;
}