Laravel PHP 表单提交，显示结果时打断文本？

Question

所以我有一个待办事项列表和一个非常奇怪的问题。

所以我有一个表单，用户可以在其中编写标题和任务描述，任务描述作为文本区域完成，之后用户按下提交按钮并提交任务，然后将用户重定向到“主页”和显示所有待处理的任务。

问题是当用户在 texarea 中按下“ENTER”时，文本“中断”并且不与 HTML div 标签对齐。（如下图所示（TASK 3 和任务 2))

这是我的“显示所有任务”代码

>  @foreach ($tasks as $task)
>         <div class="Task">
>             <h1>{{ $task->TaskName }}</h1>
>             <div class="TaskDescription">
>                 <p>{{ $task->TaskDescription }}</p>
>             </div>
>         </div>
>     @endforeach

，这是我的“创建新任务”表单

<div class="FormContainer">
<form method="POST" action="/tasks" class="form_group_vertical">
    @csrf
    <input name="TaskName" placeholder="Task name..." class="lineInput">
    <textarea name="TaskDescription" placeholder="Task description..." class="Form_TextArea"></textarea>

    <button class="btn_submit" type="submit">Create new Task</button>

</form>

这就是我存储所有任务的方式

    public function storeTasks(){
  //  return request()->all(); data displayed in JSON

  Task::create([
      'TaskName' => request('TaskName'),
      'TaskDescription' => request('TaskDescription')
  ]);

  return redirect('/tasks');
}

这是我的向上迁移函数

    public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('TaskName');
        $table->text('TaskDescription');
        $table->timestamps();
    });
}

到目前为止我已经尝试过，改变数据的保存方式，尝试将 {{ }} 替换为 {!! !!}，尝试更改数据库，并尝试完全重写表单 - 我找不到任何修复此方法的方法。

Answer 1

使用nl2br

  @foreach ($tasks as $task)
         <div class="Task">
             <h1>{{ $task->TaskName }}</h1>
             <div class="TaskDescription">
                 <!-- Change here -->
                 <p>{!! nl2br(trim($task->TaskDescription)) !!}</p>
                 <!-- OR -->
                 <p>{!! str_replace(array("\r\n", "\r", "\n"), "<br />", $task->TaskDescription) !!}</p>
             </div>
         </div>
  @endforeach

Answer 2

解决方案 !!!

为了解决我的问题，我必须替换 $table->text('TaskDescription') 并将其更改为 $table->longText('TaskDescription')

用长文本替换文本

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('TaskName');
        $table->longText('TaskDescription');
        $table->timestamps();
    });
}

Answer 3

在 <pre> 内设置文本区域也可以。

Laravel PHP 表单提交，显示结果时打断文本？

Laravel PHP form submition, breaks text when displaying results?

php

forms

sql-server

laravel

laravel-blade