css white-space遇到“\n“换行
·
有时候想将诸如["第一行", "第二行", "第三行"]这样的文案，在页面里折行显示，就用换行符join("\n")将文字拼接起来。
设想是美好的，但是效果却是。。
<!-- 在html中使用react，直接看content中的组件内容就好 -->
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const e = React.createElement;
const content = () => {
let arr = ["第一行", "第二行", "第三行"];
return <div>
{arr.join("\n")}
</div>
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(content), domContainer);
</script>
</html>
<!-- -->
不认识换行符吗？只有空格。
一顿百度猛如虎，找到了解决方案
css样式 {
white-space: pre-line; // 合并空白符序列，但保留换行符
}
pre、pre-wrap、break-spaces也能识别出换行符，但同时会保留空白符序列，如果只想换行，不建议使用
会出现这种情况
const content = () => {
let arr = ["第一行", "第二行", "第三行"];
return <div>
111111 {arr.join("\n")}
</div>
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)