將單詞列表呈現為<span>a</span><p> <span>React js 中的標簽</span>

Question

我有一個單詞列表：

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

我想用雙列表渲染在 React Js 中渲染它們：

<Document>組件使用 map() 呈現<Pargraph>的列表。 <Pargraph>使用 map() 渲染<Word>的列表。

我的問題是，當我的<paragraph>太長時，文字會超出屏幕。 我想在單詞之間插入一個<br>但它不適用。 最終呈現的 html 是：

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

問題是</br>不適用，這可能是包裝單詞的正確標簽？

這是一張照片 =>溢出渲染

---

更新

---

這里的反應代碼呈現這個：

文檔 => 段落

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>
    );
  };
}

段落 => 文字 [ 這里<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>
    );
  };

單詞：

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

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

文檔具有 flex css：column-container

Answer 1

對於React這絕對是一個CSS問題。 您是否嘗試將p組件的maxWidth設置為100% ？ 或者，也許您可​​以檢查span元素上的display屬性，我認為在前面使用檢查器可以很快解決。

Answer 2

我通過在段落內的每個跨度中使用空格：初始和空格：在段落中預換行來解決溢出問題。