Laravel表单提交后textarea换行导致任务列表展示文本错位如何解决？

• textarea输入的换行符为\n格式，HTML默认渲染规则会忽略纯文本中的\n、连续空格，仅识别<br>、<p>等标签作为换行依据，这是文本错位的根本原因。
• 直接将{{ }}替换为{!! !!}无效，是因为原始存储的内容中没有<br>标签，\n依然不会被HTML识别为换行，同时这种操作会引入XSS注入风险，用户输入恶意HTML/JS代码会被直接执行，属于不安全操作。

方案1：CSS处理（最推荐，无安全风险，无需修改业务逻辑） #

给任务描述的p标签设置white-space: pre-line属性即可，该属性会自动保留文本中的\n换行符，同时正常合并多余空白字符，完全符合文本展示需求，模板依然使用安全的{{ }}语法输出内容即可。
添加如下CSS代码：

.TaskDescription p {
  white-space: pre-line;
  /* 如有对齐需求可额外添加 text-align: left; 保证内容左对齐 */
}

方案2：后端转换换行符（适合需要自定义换行样式的场景） #

在输出内容前先对文本做安全转义，再将\n替换为<br>标签输出即可，Laravel中推荐用模型访问器实现：

1. 给Task模型添加访问器：

// App/Models/Task.php
public function getFormattedDescriptionAttribute()
{
    // 先对用户输入做转义，再转换换行符为<br>，避免XSS风险
    return nl2br(e($this->TaskDescription));
}

2. 修改Blade模板的渲染代码：

<div class="TaskDescription">
    <p>{!! $task->formatted_description !!}</p>
</div>

内容的提问来源于stack exchange，提问作者Filip Studený