Html 在表格内容中显示换行符

我有这样一个HTML：

<table id="mytable">
<tr>
<td>      

Name: 
Rica

Lastname: 
Florentino 

Amount: 
3,000 
</td>
</tr>
</table>

<pre>
  Your text: 
  Lorem Ipsum
</pre>

应该是：

Name: 
Rica

Lastname: 
Florentino 

Amount: 
3,000 

---

那么，您可以在两者之间添加

<table id="mytable">
<tr>
 <td>      
   Name: 
   Rica
    <br>
   Lastname: 
   Florentino 
    <br>
   Amount: 
   3,000 
 </td>
</tr>
</table>

---

那么，您可以在两者之间添加

<table id="mytable">
<tr>
 <td>      
   Name: 
   Rica
    <br>
   Lastname: 
   Florentino 
    <br>
   Amount: 
   3,000 
 </td>
</tr>
</table>

---

你听说过换行吗

<br />

要更改元素的html内容，请使用

.html（）

在页面加载时调用此行，它应该在表格单元格的开头和结尾插入

pre

-标记

    <table id="mytable">
     <tr>
    <td>      

      Name: 
     <br>
     Rica
     <br>
     Lastname: 
     <br>
      Florentino 
      <br>

      Amount: 
      <br>
      3,000 
     </td>
   </tr>
    </table>

$（'#mytable tr td'）.html（“+$（'#mytable tr td'）.html（）+”）

无论哪种方式，都可能很难维护格式，因为有时生成的html在发送到客户端之前会得到优化。这意味着您可能已经丢失了代码中的格式

---

相反，您应该尝试更改html生成服务器端并在那里使用换行符标记。

您听说过换行符吗

<br />

要更改元素的html内容，请使用

.html（）

在页面加载时调用此行，它应该在表格单元格的开头和结尾插入

pre

-标记

    <table id="mytable">
     <tr>
    <td>      

      Name: 
     <br>
     Rica
     <br>
     Lastname: 
     <br>
      Florentino 
      <br>

      Amount: 
      <br>
      3,000 
     </td>
   </tr>
    </table>

$（'#mytable tr td'）.html（“+$（'#mytable tr td'）.html（）+”）

无论哪种方式，都可能很难维护格式，因为有时生成的html在发送到客户端之前会得到优化。这意味着您可能已经丢失了代码中的格式

相反，您应该尝试更改html生成服务器端并在那里使用换行标记。

Put br tag

姓名：


里加


姓氏：


弗洛伦蒂诺


数量：


3,000 

这里是放置br标签

姓名：


里加


姓氏：


弗洛伦蒂诺


数量：


3,000 

---

以下是

作为手动插入

元素的替代方法，您可以使用CSS执行此操作：

姓名：
里加
姓氏：
弗洛伦蒂诺
数量：
3,000 

看。此外，您可能希望了解更多有关该物业的信息

---

如果您有多个单元格，我建议使用样式表而不是

样式

元素。

作为手动插入

元素的替代方法，您可以使用CSS来执行此操作：

姓名：
里加
姓氏：
弗洛伦蒂诺
数量：
3,000 

看。此外，您可能希望了解更多有关该物业的信息

---

如果您有多个单元格，我建议使用样式表而不是

style

元素。

只需添加一些

标记！这是真正的

表

标记吗（仅一个单元格）？修好了吗？将表格包装在一个表格单元中，而其中没有标记，并以这种格式显示，这似乎很奇怪。但是如果真的是这样，那么在CSS中使用

空白：pre

。只需添加一些

标记！这是真正的

表

标记吗（仅一个单元格）？修好了吗？将表格包装在一个表格单元中，而其中没有标记，并以这种格式显示，这似乎很奇怪。但是如果情况确实如此，那么在CSS中使用

空白：pre

。为了输出OP想要的内容，您仍然缺少一些。此外，为什么标签中不必要的

/

？@rink.attendant.6 well

是因为一些生成HTML的系统可能基于XML生成器，因此不能只输出一个简单的
标签<代码>
在这种情况下有效。。但是，因为我假设这不是OP的情况。。已删除额外的

/

输出已显示，因此如何自动转换空格或至少保留预格式化的数据？标题也已修改..更新我的代码。。这是使用jquery css（）“更新的”答案与原始答案完全不同，它毫无意义地依赖JavaScript，在一个简单的css规则就足以产生效果时使用jquery。为了输出OP想要的内容，您仍然缺少一些。此外，为什么标签中不必要的

/

？@rink.attendant.6 well

是因为一些生成HTML的系统可能基于XML生成器，因此不能只输出一个简单的
标签<代码>
在这种情况下有效。。但是，因为我假设这不是OP的情况。。已删除额外的

/

输出已显示，因此如何自动转换空格或至少保留预格式化的数据？标题也已修改..更新我的代码。。这是使用jquery css（）“更新的”答案与原始答案完全不同，它毫无意义地依赖JavaScript，在一个简单的css规则足以产生效果时使用jquery。我需要使用jquery在该数据上添加pre标记。或者至少将空格转换为
，因为输出已经显示。我需要使用jquery在该数据上添加预标记。或者至少将空格转换为
，因为输出已显示

    <table id="mytable">
     <tr>
    <td>      

      Name: 
     <br>
     Rica
     <br>
     Lastname: 
     <br>
      Florentino 
      <br>

      Amount: 
      <br>
      3,000 
     </td>
   </tr>
    </table>

<table id="mytable">
<tr>
 <td style="white-space: pre-line;">      
   Name: 
   Rica

   Lastname: 
   Florentino 

   Amount: 
   3,000 
 </td>
</tr>
</table>