Bootstrap表格与textarea数据显示空格不一致问题排查与修复咨询

这绝对不是样式表的锅——问题出在HTML元素和textarea表单控件对空白字符的处理逻辑完全不同，咱们一步步拆解：

为什么两种展示效果不一样？ #

1. Bootstrap表格的处理逻辑 #

你在表格里用了这段代码：

<td> @Html.Raw(Html.Encode(item.reply_content).Replace("\n", "<br />") </td>

这里的操作逻辑是：

• 先用Html.Encode转义HTML特殊字符（避免XSS风险，比如把<转成<）；
• 然后把文本里的换行符\n替换成HTML换行标签<br>；
• 最后用Html.Raw告诉框架不要转义<br>，让浏览器直接解析成换行。
  所以原本的6W\nYT6会被渲染成两行：6W在上，YT6在下（你描述的“6W YT6”应该是换行后的视觉效果）。

2. Textarea的处理逻辑 #

你的textarea代码是：

<textarea name="Call_Desc" class="form-control" style="height: 300px; min-width: 91.5%; max-width: 91.5%; width: 91.5%;" id="comment" readonly>@Model.Call_Desc</textarea>

Textarea是纯文本表单控件，它不会解析HTML标签，只会原样显示文本内容。你看到的“6W（3个空格）YT6”，大概率是这两种情况之一：

• 后端在赋值Model.Call_Desc时，把原始的换行符\n替换成了3个空格；
• 你的textarea被设置了特殊的CSS属性，比如white-space: nowrap，导致换行符被浏览器转换成了空格（默认情况下textarea会保留换行）。

怎么修复？ #

根据你的需求选择对应的方案：

方案1：让textarea和表格一样显示换行 #

如果想让textarea里的内容也显示成换行（而不是空格）：

1. 检查后端数据：确保Model.Call_Desc保留了原始的换行符\n，不要在后端把换行替换成空格；
2. 修复textarea样式：如果有自定义CSS修改了white-space属性，把它改回默认的保留换行的设置：

   #comment {
     white-space: pre-wrap; /* 保留换行，同时自动换行适应容器宽度 */
     /* 或者用white-space: pre; 严格保留原始空白格式，不自动换行 */
   }
   

方案2：让表格和textarea一样显示空格 #

如果想让表格里的内容也显示成3个空格（不换行）：

1. 去掉换行替换逻辑：删除Replace("\n", "<br />")，直接输出编码后的内容：

   <td>@Html.Encode(item.reply_content)</td>
   

   注意：HTML默认会把连续空白字符（包括换行、多个空格）合并成单个空格。如果要保留3个空格的显示，需要给<td>设置white-space: pre-wrap，让它保留原始空白：

   <td style="white-space: pre-wrap;">@Html.Encode(item.reply_content)</td>
   

核心知识点 #

• HTML元素（比如<td>）默认会合并所有连续空白字符（换行、空格、制表符）为单个空格；
• Textarea表单控件默认会保留原始空白字符（换行、空格），除非被CSS或后端逻辑修改。

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