在 React js 的 标签中将单词列表呈现为

Question

我有一个单词列表：

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

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

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

我的问题是当我的 <paragraph> 太长时，文字会超出屏幕范围。我试图在单词之间插入   但它不适用。最终结果渲染 html 是：

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

问题是  不适用，这可能是包装单词的正确标签？

这里是一张照片=> 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>
    );
  };
}

段落 => 单词 [此处  ]

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

这绝对是 CSS 相对于 React 的问题。您是否尝试过在 100% 处为您的 p 组件设置 maxWidth？或者也许您可以检查 span 元素上的 display 属性，我认为前面有检查器可以很快解决它。

Answer 2

我通过使用 white-space: initial in every span inside paragraph 和 white-space: pre-wrap in paragraph.

解决了溢出问题

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

Render list of words as <span> in a <p> tag in React js

html

javascript

rendering

overflow

reactjs