当前位置：首页 > news >正文

文本换行问题

news 2025/8/4 11:50:54

问题描述

前端中的<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	保留所有空格和换行	自动换行，内容会适应容器宽度	普通文本