Is there a way to break the long text without defining width or max-width in EDGE / IE11?

Question

I am facing an issue where in text is overflowing the parent in IE11 & EDGE and working fine in Chrome, firefox and Opera.

I have tried multiple approaches Approach 1 -> Using break-all instead of break-word: With this approach, text is getting truncated in between the words. So, I can't use this approach

Approach 2 -> Using max-width or width property set for child With this approach, width should be hardcoded for all the child controls or should be given as some % like 95%

Approach 3 -> Using display type as inline With this approach, there will be no margins, padding as inline will ignore all these properties.

I have tried the above approaches and added the issue in the below jsfiddle link

"https://jsfiddle.net/gc4yknax/"

This code works fine in Chrome and breaks in Edge / IE11.

Expected output: Long Text should get wrapped into next line and should not go beyond the container.

Actual output: Long text is not getting wrapped and going beyond the parent container.

Answer 1

You can add overflow: hidden in css .break-word. It will fix the problem.