Html Paragraph element is not responsive with dynamic text inside

Question

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  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 {machinery.description} but instead i render it normally like this kljaklsjdfhka 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
-------------|

Do any machinery descriptions have any HTML inside? – Conor Reid Feb 11 '22 at 20:48 — Conor Reid, Feb 11 '22 at 20:48

score 1 · Accepted Answer · answered Feb 11 '22 at 20:49

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>

WHAT?? HOW DOES IT WORK? I think stack overflow god came and touched your code, i tried this like a hundred times and it did not work, but now it does, anyway thank you. — Meriegg, Feb 11 '22 at 21:01

Html Paragraph element is not responsive with dynamic text inside

1 Answers1