如何让带换行文本从数据库取出后在HTML文本框正常显示并保留原格式

存入数据库的多行动植物教学相关文本，读取展示时所有内容自动合并为单行，需要保留原始换行、列表格式，在HTML文本框中正常显示。
对应原始马来文文本的中文翻译如下：

物种存续能力指的是动植物维持自身种群延续、避免灭绝的能力。
动物演化出的特殊自我保护特征与行为包括：

1. 断肢逃生
2. 喷射黑色墨汁
3. 生长假眼迷惑天敌
   教学环节鼓励使用信息通信技术（TMK），引导学生观察动物各类自我保护的特殊特征与行为。

不需要做复杂的富文本转换、标签替换，根据展示场景选对应处理方式即可：

• 若在<textarea>多行输入框中展示：
  只要保证数据库存取环节没有过滤掉文本里的原始换行符（\n/\r\n），直接把读取到的原始文本赋值给textarea的value属性即可，textarea原生支持识别普通换行符，会自动按原格式换行展示，不需要额外转义。
  代码示例：

  <textarea rows="8" cols="60" id="contentArea"></textarea>
  <script>
    // 接口返回的数据库原始文本，不要提前替换换行符
    const dbContent = `物种存续能力指的是动植物维持自身种群延续、避免灭绝的能力。
  

动物演化出的特殊自我保护特征与行为包括：
(i) 断肢逃生;
(ii) 喷射黑色墨汁;
(iii) 生长假眼迷惑天敌。
教学环节鼓励使用信息通信技术（TMK），引导学生观察动物各类自我保护的特殊特征与行为。`
document.getElementById('contentArea').value = dbContent

- 若在div、p等普通HTML块标签中展示（非输入场景）：
不需要把换行符手动替换成`<br>`标签，只需要给展示文本的标签添加CSS属性`white-space: pre-line;`，浏览器会自动识别文本内的原始换行完成排版，同时会自动适配容器宽度换行，不会出现`<pre>`标签默认等宽字体、内容溢出容器的问题。
代码示例：
```css
.show-content {
  white-space: pre-line;
  /* 其余自定义排版样式按需添加即可 */
}

• 常见问题排查：
  如果按上述方式配置后依然显示为单行，优先检查后端的参数过滤、XSS防护逻辑，这类规则很多会默认过滤掉换行、制表符这类不可见字符，关闭对应换行过滤规则即可。不要把换行转成<br>标签存入数据库，否则在textarea中展示时会直接把<br>标签原文显示出来，反而出现格式错误。

内容的提问来源于stack exchange，提问作者drivecoffeeforenergy