试图用 React 将文本分成两行

Question

我正在尝试使用 \n 将文本分成 2 行，但它不起作用这是我的文字 para: "比以往更快地完成任务。使用我们的平台，只需几分钟。",

我想成为这样的人： para: "完成任务的速度比以往任何时候都快。使用我们的平台，只需几分钟。",

但使用 \n 无效，还有其他解决方案吗？

Answer 1

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

Answer 2

如果你想让“\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>
     )
}

Answer 3

我建议使用样式来解决这个问题，而不是 content-driven。如果您减小 div 元素的宽度，文本将默认断开。

Answer 4

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

Answer 5

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

最终，您可以尝试使用 white-space: pre-line 属性.

例如

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

然后在渲染中这样做：

render() {
   return <div className="break-line">Complete tasks faster than ever before. \n With our platform, it only takes minutes</div>
}

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

Answer 6

将您的文本换成 span，例如：

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

试图用 React 将文本分成两行

Trying to break the text in 2 line with React

javascript

break

reactjs