【问题标题】：html - Display new line in code taghtml - 在代码标签中显示新行
【发布时间】：2015-12-09 14:23:09
【问题描述】：

我正在尝试显示代码，但所有内容都显示在一行中。如何显示多行代码标签？

这是我的代码：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<title>Documentación: Events</title>
<body>
<code>
    {
    "id_tabla":3,
    "fecha":"02-09-2015",
    "privacidad":0,
    "timediff_m": "00"
    }
</code>
</body>

这是在浏览器中的显示方式：

{"id_tabla":3,"fecha":"02-09-2015","privacidad":0,"timediff_m": "00"}

编辑

我只能使用<code>标签

【问题讨论】：

您可以改用<pre> 标签。 See this question for more information.

标签： html

【解决方案1】：

使用<pre> 而不是<code>。

<pre>
  {
    "id_tabla": 3,
    "fecha": "02-09-2015",
    "privacidad": 0,
    "timediff_m": "00"
  }
</pre>

如果你想要内联的东西，你应该使用<code>，如果你需要多行的东西，你应该使用<pre>。

【讨论】：

“

 标签定义了预格式化的文本...  元素中的文本以固定宽度字体（通常是 Courier）显示，并且保留了空格和换行符。”这意味着您可以对每个应用不同的 CSS。

【解决方案2】：

这个问题已经回答here:

code {
  display: block;
  white-space: pre-wrap   
}

<code>
    {
    "id_tabla":3,
    "fecha":"02-09-2015",
    "privacidad":0,
    "timediff_m": "00"
    }
</code>

【讨论】：