JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
If space is present break at space, else break at end of div width
</h3>
<h3>
this work in mac and chrome not on ie,edge and firefox
</h3>
<label id ="labelLongText" class ="break-long-word">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
</label>

<label id ="labelLongTextwithoutSpace" class ="break-long-word">
Itisalongestablishedfactthatareaderwillbedistractedbythereadablecontentofapagewhenlookingatitslayout.ThepointofusingLoremIpsumisthatithasamore-or-lessnormal.
</label>

CSS

.break-long-word{
    white-space:pre-wrap;
    word-break: break-word;
  
}
/*ms edge specific styles*/
@supports (-ms-ime-align:auto) {
    .white-space-pre-wrap{
    word-wrap:break-word!important;
    word-break:break-all!important;
    display:inline-block; 
}
}
 /*ms ie specific styles*/
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .white-space-pre-wrap{
    word-wrap:break-word!important;
    word-break:break-all!important;
     display:inline-block; 
}
}
 /*moz firefox specific styles*/
 @-moz-document url-prefix() {
        .white-space-pre-wrap{
    word-wrap:break-word!important;
    word-break:break-all!important;
     display:inline-block; 
}
 }