JSFiddle - React, Tailwind, and code Playground

HTML

nothing
<div id="nothing" class="tmp">
    hi im/a-longword
    <br/><br/>
    breaklineon-and_and and/
    <br/><br/>
    ifnosymboliwantwordbreak
</div>
word-wrap: break-word;
<div id="wrap" class="tmp">
    hi im/a-longword
    <br/><br/>
    breaklineon-and_and and/
    <br/><br/>
    ifnosymboliwantwordbreak
</div>
word-break: break-all;
<div id="break" class="tmp">
    hi im/a-longword
    <br/><br/>
    breaklineon-and_and and/
    <br/><br/>
    ifnosymboliwantwordbreak    
</div>
expected
<div id="expected" class="tmp">
    hi im/a-
    <br/>
    longword
    <br/><br/>
    breaklineon-
    <br/>
    and_and and/
    <br/><br/>
    ifnosymboli
    <br/>
    wantwordbr
    <br/>
    eak     
</div>

CSS

.tmp {
    border:black 1px solid;
    width:100px;
    margin:5px;
}
#wrap {
    word-wrap: break-word;
}
#break {
    word-break: break-all;
}
}