试图用React将文本分成两行

问题描述

我正在尝试使用\ n用React将文本分成两行，但无法正常工作 这是我的文字 para：“以前所未有的速度完成任务。借助我们的平台，只需几分钟。”，

，我想成为这样： para：“比以往任何时候都更快地完成任务。 使用我们的平台，只需几分钟。”，

但是使用\ n不起作用，还有其他解决方法吗？

解决方法

如果可以的话，您可以添加<br /> html标签

,

如果您希望“ \ n”正常工作，则需要添加CSS属性style = {{{whiteSpace：“ pre-line”}}}

function ReactApp(){
     const text = "Complete tasks faster than ever before.\n With our platform,it only takes minutes."
     return (
         <div style={{whiteSpace: "pre-line"}} >{text}</div>
     )
}

,

我建议使用样式而非内容驱动来解决此问题。如果您减小div元素的宽度，则默认情况下文本会中断。

,

将它们分成单独的<p>标签，或在它们之间放置<br>标签。

,

最好的方法是将文本放入单独的容器中（例如div）。

最终，您可以尝试使用id: { title: 'ID',dataIndex: 'id' },~~ Type '{ title: string; dataIndex: string; }' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to '{ title: string; dataIndex: string; }'.ts(2322) 属性。

例如

white-space: pre-line

然后在渲染中执行以下操作：

.break-line {
   white-space: pre-line;
}

它应该做的工作。如有任何疑问，请随时提出！您可以在此处阅读有关空白属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

,

以跨度环绕文本：

<span>Your Text</span><br>
<span>Next Text</span>