Estoy creando esta página de maquinaria para alguien y encontré este problema, estoy usando la última versión de Tailwind CSS y reacciono por cierto.
Por ahora estoy usando un objeto simple para almacenar los artículos, así:
const machinery = [{ image: Machine1, name: "Name", description: "alkjfaskldjfhaklsd", idx: 0 }]Mapeo estos datos así:
<div className="flex flex-col"> {machinery.map((machine) => { return ( <div key={machine.idx}> <p className="text-2xl tex-slate-900 font-Spartan font-semibold"> {machine.name} </p> <p className="text-base text-slate-600 font-Spartan font-medium"> {machine.description} </p> </div> ); })} </div> Ahora el problema es que el texto de la descripción (la segunda etiqueta <p></p> ) está desbordando la pantalla (permanece en una línea) cuando se hace más pequeña, la cosa es que si no renderizo el texto dentro como this <p>{machinery.description}</p> pero en lugar de eso lo renderizo normalmente así <p>kljaklsjdfhka</p> el texto en realidad se divide y no desborda la pantalla.
Aquí hay un ejemplo:
Texto renderizado dinámicamente
-------------| asdjfhsakdfjh|adkjadfjkhsgd <- the text (it overflows) | | <- screen border -------------|Texto normalmente representado
-------------| asdjfhsakdfjh| adkjadfjkhsgd|<- the text (it does not overflow) | |<- screen border -------------|Puede usar el ajuste de palabras CSS word-wrap: break-word; en el div principal del texto, en este ejemplo podría agregar una clase o id a su <div key={machine.idx}> así:
<style> .putYourClassNameHere { word-wrap: break-word; } </style> <div className="flex flex-col"> {machinery.map((machine) => { return ( <div id="putYourClassNameHere" key={machine.idx}> <p className="text-2xl tex-slate-900 font-Spartan font-semibold"> {machine.name} </p> <p className="text-base text-slate-600 font-Spartan font-medium"> {machine.description} </p> </div> ); })} </div>