It is definitely a CSS problem respect to a React one.
Have you tried to set a maxWidth to your p component at 100%?
Or maybe you can check the display properties on the span elements, with the inspector in front it can be solved quite fast I think.

I solved the overflowing problem by using white-space: initial in every span inside paragraph and white-space: pre-wrap in paragraph.

I have a list of list of words:

document    [ paragraph [w1, w2, w3 ] , [w4, w5, w6] , [w7, ...], ... ]

I would like to render them in React Js with double list rendering:

A <Document> component render the list of <Pargraph> with map(). The <Pargraph> render the list of
<Word> with map().

My problem is that when i have a too long <paragraph>, words goes outside of screen. I tr to insert a <br> between words but it doesn’t apply. The final resulting rendered html is:

<div>  # my Document
  <p> # my paragraph
    <span> <span> <span> ... <br/> <span> <span>
  </p>
  <p>
    ...
  </p>
</div>

Problem is that </br> doesn’t apply, which may be the correct tag to wrap words ?

Here a photo =>
overflow rendering

---

UPDATE

---

Here the react code to render this :

Document => Paragraph

export default class Document extends React.Component<
  DocumentProps,
  DocumentState
> {
  constructor(props: Readonly<DocumentProps>) {
    super(props);
  }

  render = () => {
    return (
      <div id="documentContainer">
        {this.props.document.pargraphs.map((paragraph, index) => {
          return (
            <Paragraph
              key={index}
            ></Paragraph>
          );
        })}
      </div>
    );
  };
}

Paragraph => Words [ HERE THE <br /> ]

export default class Paragraph extends React.Component<ParagraphProps, ParagraphState> {
  constructor(props: Readonly<ParagraphProps>) {
    super(props);
  }

  render = () => {
    return (
      <p className="rowContainer">
        {this.props.text.map((word, index) => {
          console.log(index);
          if (index === 10) return <br />;
          return <Word word={word} key={index}></Word>;
        })}
      </p>
    );
  };

Word:

export default class Word extends React.Component<WordProps> {
  constructor(props: Readonly<WordProps>) {
    super(props);
  }

  render = () => {
    return <span className="word">{this.props.word}</span>;
  };
}

Document has flex css: column-container