CODEWITHSUNDEEP
css
Matthew Murdoch
Matthew Murdoch

Reputation: 31493

How to preserve line breaks in <code> block?

I have some code samples which I want to publish in an HTML document. I'm wrapping them with <code>, tags but I'd like them to be styled such that line breaks are preserved. I can do this by also enclosing them with <pre> tags, but I'd prefer to use CSS.

I've tried the following in IE7 (which according to this reference should work), but with no joy (line breaks are stripped):

code {
    white-space: pre;
}

Is this possible?

Upvotes: 34

Views: 41911

Answers (2)

SpliFF
SpliFF

Reputation: 39014

Check your doctype is valid and on the first line. Maybe it's slipping into quirks mode?

Upvotes: 11

Paolo Bergantino
Paolo Bergantino

Reputation: 488694

Are you sure you're not doing something wrong? This code works for me on 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>

Upvotes: 22

Related Questions