css - How to preserve line breaks in <code> block?

Question

Welcome To Ask or Share your Answers For Others

css - How to preserve line breaks in <code> block?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:48:41+0000

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>

Categories

css - How to preserve line breaks in <code> block?

css - How to preserve line breaks in <code> block?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags