how to break a long words in new line when there is no space to fit

this must be a css problem but I am not entirely sure if you can achieve this using only css and have a perfect typography on my site!

My following code looks like:

overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

but for some reason it does not seem to work, tested with Chrome and Edge! The words are breaking to a new line as whole word instead of showing part of it to the remaining space and the next characters to new line!

Any idea how to solve this?