React <p> 和 Tailwind，里面的文本溢出 X 或 Y 轴，而我特别指出了 Y

Question

我正在使用 TailwindCSS 2.2 创建一个反应前端，我在 <p>

中有以下两个文本

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

和

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.

从图中可以看出，D 溢出 Y，而 LoremIpsum 溢出（如预期的那样）X。这里发生了什么？

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

它在 div 里面，下面是类

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

Answer 1

您只需添加一个 word-break。将您的样式设置为：

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

您可以找到更多关于此的信息here

React <p> 和 Tailwind，里面的文本溢出 X 或 Y 轴，而我特别指出了 Y

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

html

css

reactjs

tailwind-css