在 React js 的 <p> 标记中将单词列表呈现为 <span>

Question

我有一个单词列表：

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

我想用双列表渲染在 React Js 中渲染它们：

<Document> 组件使用 map() 渲染 <Pargraph> 列表。 <Pargraph> 渲染列表 <Word> 与 map()。

我的问题是，当我的<paragraph> 太长时，文字会出现在屏幕之外。我想在单词之间插入一个<br>，但它不适用。最终生成的渲染 html 是：

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

问题是</br> 不适用，这可能是换行的正确标签？

这是一张照片 => overflow rendering

---

更新

---

这里是渲染这个的反应代码：

文档 => 段落

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 的问题。 您是否尝试在100% 为您的p 组件设置maxWidth？ 或者您可以检查span 元素上的display 属性，我认为检查器在前面可以很快解决。

Answer 2

我通过使用 white-space: initial in each span inside 和 white-space: pre-wrap in paragraph 解决了溢出问题。