添加pre-wrap样式后首段出现大缩进的问题排查与解决

原因分析 #

你遇到的第一段大缩进问题，根源在于white-space: pre-wrap的特性：它会原样保留HTML中的所有空白字符（包括模板代码里的换行、缩进空格）。看你的展示页模板，<%= book.review %>前面有不少缩进空格，再加上<p>标签内部的换行，这些空白字符在pre-wrap规则下会被直接渲染成连续的空格，就造成了看起来像大缩进的效果——而数据库和textarea里的内容本身并没有这些空白。

解决方案（二选一即可） #

• 方案1：调整模板代码，消除多余空白
  把<p>标签和书评输出代码放在同一行，去掉内部的缩进：

  <li class="list-group-item">
      <p class="card-text preWrap"><%= book.review %></p>                   
  </li>
  

  这样模板里的多余空格和换行就不会被pre-wrap渲染出来，同时完全保留用户输入的换行格式。

• 方案2：替换CSS属性为pre-line
  修改你的.preWrap类样式：

  .preWrap {
      white-space: pre-line;
  }
  

  pre-line的特性是保留用户输入的换行，但会自动合并连续的空白字符（包括模板里的缩进空格），既解决了缩进问题，又能保留用户的段落换行，不需要调整模板代码。

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