使用 white-space 的 CSS 样式
可以用 CSS 的 white-space 属性来实现换行符的显示。
具体代码:
export default function Display({ content }) {
return (
<div style={{ whiteSpace: "pre-wrap" }}>
{content}
</div>
);
}解释:
white-space: pre-wrap是一种 CSS 样式,能够保留换行符和空格,并根据需要自动换行。pre-wrap的效果如下:- 保留输入中的换行符。
- 允许长内容自动换行(减少水平滚动条)。
例如:
输入的内容 "12312\\n123132" 会渲染为:
12312
123132