Html Paragraph element is not responsive with dynamic text inside

Issue

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
-------------|

Solution

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>

Answered By - MaxK123