目录
问题描述
前端中的<textarea>标签输入多行文本，传输到MySQL数据库后，再取出渲染到一个<div>标签中，出现“文本不换行，文字挤在一起”
具体问题如下图所示：
<textarea>的内容转移到<div>时，不会自动换行
问题解决
分析问题后，问题可以由“前端”或者“后端”两个方面解决。
为方便，这里使用“点击按钮”的方式，来模拟前端从后端获取数据的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
background-color: #ccc;
}
#myTextarea {
width: 50%;
height: 200px;
font-size: 16px;
}
#myDiv {
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<textarea id="myTextarea"></textarea>
<button id="myButton">点击</button>
<div id="myDiv"></div>
</div>
<script>
window.onload = function () {
const button = document.getElementById('myButton');
const textarea = document.getElementById('myTextarea');
const div = document.getElementById('myDiv');
button.addEventListener('click',function (){
div.textContent = textarea.value;
})
}
</script>
</body>
</html>前端解决（推荐）
1.<br>替换
在将文本渲染到div前，可以用JavaScript将换行符替换为HTML的换行标签<br>
const text = textarea.value.replace(/\n/g,'<br>');
div.innerHTML = text;效果：
- 问题：这种方式必须使用innerHTML渲染，这样容易被XSS攻击，不建议使用
2.使用CSS属性white-space(推荐)
无需修改文本，直接通过CSS让div保留换行符
#myDiv {
background-color: white;
white-space: pre-wrap; /* 保留换行和空格，自动换行 */
}扩展
- white-space:pre-wrap和white-space:pre都是CSS中用于控制文本空白(空格、换行等)显示方式的属性，但是它们在处理“自动换行”的行为上有明显区别
| 属性值 | 空白处理 | 自动换行处理 | 应用场景 |
|---|---|---|---|
| pre | 保留所有空格和换行 | 不自动换行，内容会超出容器宽度 | 代码块，需要严格保留格式的文本 |
| pre-wrap | 保留所有空格和换行 | 自动换行，内容会适应容器宽度 | 普通文本 |
da
使用pre
使用pre-wrap
总之，不管使用pre或pre-wrap都可以保留文本中的换行，并且此时不需要使用“innerHTML”，可以很好的避免XSS攻击