React <p> and Tailwind, text inside overflows either X or Y axis, while I specifically stated Y

Question

I am creating a react frontend with TailwindCSS 2.2, I have the following two texts inside a <p>

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

And

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue ac elit consequat porttitor id sed nunc. Maecenas cursus leo et urna tristique vestibulum id sit amet turpis. Maecenas efficitur accumsan nibh, nec bibendum magna ultricies id. Duis lacus quam, interdum sit amet lacus in, dapibus convallis leo. Etiam nec metus nibh. Vestibulum ipsum nisl, ullamcorper eget dictum et, rhoncus et mi. Nunc et ligula ac lacus suscipit varius sit amet nec orci. Aliquam erat volutpat. Nulla condimentum libero ut nisl scelerisque, in fermentum augue accumsan. Cras non elit pellentesque, ullamcorper ipsum at, blandit augue. Mauris nec ex sapien. In id sapien urna. Phasellus ornare leo eu enim faucibus, ut gravida leo consectetur. Mauris dapibus blandit sem. Aliquam eu porta purus, sed volutpat mauris. Pellentesque commodo pulvinar magna nec mollis. Nulla molestie ex sit amet tortor suscipit, sed rutrum neque tristique. Ut quis eros mattis velit hendrerit convallis.

As you can see from the image, the D's overflow Y, while the LoremIpsum overflows (as intended) the X. What is happening here?

<p className = "text-md text-gray-600 w-full text-start max-h-60 overflow-y-auto break-normal"> 
</p>

And its inside a div with the following classes

w-full p-5 shadow-md rounded-md flex flex-col gap-2 items-center max-w-sm flex-shrink-0

Answer 1

You simply need to add a word-break. Set your style to:

element {
    overflow-wrap: normal;
    word-break: normal;
}

You can find more information on this here