How to get word break working on ie11 and edge?

I have a problem with the word break under ie11 and edge, my titles should look like this : expected result

And it actually look like this : actual result

I tried overflow-wrap: break-word; and word-break: break-word, none of which work with either of the browsers.

Is there any way to make it work with ms browsers ?

p.s. my html kinda look like this :

<div class="col-md">
    <h1 class="name">
        <span class="field">text i want to word break correctly</span>
    </h1>
</div>