JSX中的突破线

Question

我将应用程序中的所有文本存储在一个settings.ts文件中，但我需要添加一些断线，\n看起来不起作用。我还有别的办法可以打破这些防线吗？我和Next.js，React和TypeScript一起工作。

export const text = 'this is my text that \nshould have a breakline'

<div>{text}</div>

Answer 1

不使用\n，您可以使用另一个选项<br/>。

Answer 2

您可以将white-space设置为pre-wrap

​

const text = 'this is my text that \nshould have a breakline'

const App = () => <div className="break">{text}</div>

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

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

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

​