如何在 <code> 块中保留换行符？答案

【问题标题】：How to preserve line breaks in <code> block?如何在 <code> 块中保留换行符？
【发布时间】：2010-11-03 22:36:17
【问题描述】：

我有一些代码示例，我想在 HTML 文档中发布。我用<code>, 标签包装它们，但我希望它们的样式可以保留换行符。我也可以用<pre> 标记将它们括起来，但我更喜欢使用 CSS。

我在 IE7 中尝试了以下操作（根据this reference 应该可以），但没有任何乐趣（换行符被删除）：

code {
    white-space: pre;
}

这可能吗？

【问题讨论】：

如果换行符有意义，那么它们是“内容”，而不是“样式”，应该用 <pre>标签。如果用户样式表将您的代码重置为不同的样式，它会改变您页面的含义吗？
在这种情况下含义不会改变（它是 C 代码，所以换行对解析器没有意义）。

标签： css

【解决方案1】：

你确定你没有做错什么吗？此代码在 IE7 上适用于我：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
  code { white-space: pre; }
  </style>
</head>
<body>
  <code>
      function() {
          alert('yay');
      }
  </code>
</body>
</html>

【讨论】：

谢谢你，它对我有用！我还发现 pre-wrap 会在文本中换行以及在需要时换行：w3schools.com/cssref/pr_text_white-space.asp ---“文本将在必要时换行，并在换行时换行”

【解决方案2】：

检查您的文档类型是否有效并且在第一行。也许它正在滑入怪癖模式？

【讨论】：