i am building this machinery page for someone and i came across this issue, i am using the latest version of tailwind css and react btw.
For now i am using a plain object to store the items, like this:
const machinery = [{
image: Machine1,
name: "Name",
description: "alkjfaskldjfhaklsd",
idx: 0
}]
I map this data like this:
<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>
Now the issue is that the description text (the secon <p></p> tag) is overflowing the screen (it stays in one line) when it gets smaller, the thing is, if i don't render the text inside like this <p>{machinery.description}</p> but instead i render it normally like this <p>kljaklsjdfhka</p> the text actually splits and does not overflow the screen.
Here is an example:
Dynamically rendered text
-------------|
asdjfhsakdfjh|adkjadfjkhsgd <- the text (it overflows)
|
| <- screen border
-------------|
Normally rendered text
-------------|
asdjfhsakdfjh|
adkjadfjkhsgd|<- the text (it does not overflow)
|
|<- screen border
-------------|
You can use the CSS word-wrap: break-word; on the parrent div of the text, in this example you could add a class or id to your <div key={machine.idx}> like this:
<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>