Question

我有这样的HTML：

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

Name: 
Rica

Lastname: 
Florentino 

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

我怎样才能按原样显示它？输出似乎将换行符转换为空格。我得到的输出是：

Name: Rica Lastname: Florentino Amount: 3,000

应该是：

Name: 
Rica

Lastname: 
Florentino 

Amount: 
3,000

Answer 1

好吧，您可以在

之间添加<br>

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

或使用css管理它

<强>更新

$(function(){
  $('#mytable td').css({'white-space': 'pre-line'});
});

fiddle

Answer 2

你听说过换行了吗？

<br />

将创建一个html换行符。在您希望进行换行的任何时候插入此内容;）

如果其他所有方法都失败了，您可以使用预先格式化的文字：

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

这只会将您的格式化文本转换为代码中的浏览器。大多数情况下，默认浏览器样式表中有与其关联的不同字体。

考虑到你有一些css的情况，你可以按如下方式清除浏览器样式表：

*{
 /* selects all elements */
 /* insert your default stuff here */
 }

用于更改元素的html内容使用.html()
在页面加载时调用此行一次，它应该在表格单元格的开头和结尾插入pre - 标记

$('#mytable tr td').html("<pre>" + $('#mytable tr td').html() + "</pre>")

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

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

Answer 3

put br tag

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

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

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

这里是fiddle

Answer 4

作为手动插入<br>元素的替代方法，您可以使用CSS执行此操作：

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

   Lastname: 
   Florentino 

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

见jsFiddle。此外，您可能希望阅读有关white-space属性的更多信息。

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

在表格内容中显示换行符

4 个答案: