Есть ли способ разбить длинный текст без определения ширины или максимальной ширины в EDGE/IE11?

Я столкнулся с проблемой, когда текст переполняет родительский элемент в IE11 и EDGE и отлично работает в Chrome, Firefox и Opera.

Я пробовал несколько подходов Подход 1 -> Использование break-all вместо break-word: При таком подходе текст усекается между словами. Итак, я не могу использовать этот подход

Подход 2 → Использование набора свойств max-width или width для дочернего элемента При таком подходе ширина должна быть жестко закодирована для всех дочерних элементов управления или должна быть указана в процентах, например 95%.

Подход 3 -> Использование типа отображения как встроенного При таком подходе не будет отступов, padding as inline будет игнорировать все эти свойства.

Я пробовал вышеуказанные подходы и добавил проблему в приведенную ниже ссылку jsfiddle.

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

Этот код отлично работает в Chrome и ломается в Edge/IE11.

Ожидаемый результат: длинный текст должен переноситься на следующую строку и не должен выходить за пределы контейнера.

Фактический вывод: длинный текст не переносится и не выходит за пределы родительского контейнера.