When using the `display: block;` property within a `code` tag nested inside a `pre` tag, it results in unexpected line breaks and incomplete styling when scrolling

Question

When using the `display: block;` property within a `code` tag nested inside a `pre` tag, it results in unexpected line breaks and incomplete styling when scrolling

I am trying to create a zebra striped code sample using HTML and CSS. However, when I run the code snippet below, it adds unwanted new lines and does not apply the styling properly when using the scroll bar. How can I resolve this issue?

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<style>
body {
max-width: 650px;
margin: 0 auto;
}
pre {
counter-reset: code-line;
overflow-x: auto;
}
code {
counter-increment: code-line;
display: block;
}
code::before {
content: counter(code-line) ": ";
}
code:nth-child(odd) {
background-color: #aaa;
}
</style>
<body>

<pre>
<code>Quisque quis congue lectus. Nullam ornare quis magna sit amet volutpat. Nam quis magna id ex venenatis rutrum.</code>
<code>Quisque quis congue lectus. Nullam ornare quis magna sit amet volutpat.</code>
<code>Quisque quis congue lectus.</code>
</pre>
</body>
</html>

html css

Answer 1

Answer №1

To achieve this effect, all you need is a basic background style and you can eliminate the display: block

body {
  max-width: 650px;
  margin: 0 auto;
}

pre {
  counter-reset: code-line;
  overflow-x: auto;
  line-height:1.2em;
  background:repeating-linear-gradient(#aaa 0 1.2em,transparent 1.2em 2.4em);
}

code {
  counter-increment: code-line;
}

code::before {
  content: counter(code-line) ": ";
}

<pre>
<code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</code>
<code>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</code>
<code>In hac habitasse platea dictumst.</code>
</pre>

<pre style="font-size:20px;">
<code>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</code>
<code>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</code>
<code>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</code>
</pre>

Answer 2

To achieve this effect, all you need is a basic background style and you can eliminate the display: block

body {
  max-width: 650px;
  margin: 0 auto;
}

pre {
  counter-reset: code-line;
  overflow-x: auto;
  line-height:1.2em;
  background:repeating-linear-gradient(#aaa 0 1.2em,transparent 1.2em 2.4em);
}

code {
  counter-increment: code-line;
}

code::before {
  content: counter(code-line) ": ";
}

<pre>
<code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</code>
<code>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</code>
<code>In hac habitasse platea dictumst.</code>
</pre>

<pre style="font-size:20px;">
<code>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</code>
<code>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</code>
<code>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</code>
</pre>

Answer 3

Answer №2

According to the information found on the MDN documentation page, the purpose of the <pre> tag is to display text exactly as it appears in the HTML source file.

In reviewing the code snippet provided, it seems that the initial code tag contains a sentence that exceeds the maximum width set for the body element. This results in the content overflowing due to the sentence being displayed with formatting applied.

To address this issue, you may consider using the white-space property to control how white space is handled within the element.

pre {
    counter-reset: code-line;
    overflow-x: auto;
    white-space: pre-wrap;
}

Answer 4

According to the information found on the MDN documentation page, the purpose of the <pre> tag is to display text exactly as it appears in the HTML source file.

In reviewing the code snippet provided, it seems that the initial code tag contains a sentence that exceeds the maximum width set for the body element. This results in the content overflowing due to the sentence being displayed with formatting applied.

To address this issue, you may consider using the white-space property to control how white space is handled within the element.

pre {
    counter-reset: code-line;
    overflow-x: auto;
    white-space: pre-wrap;
}

When using the `display: block;` property within a `code` tag nested inside a `pre` tag, it results in unexpected line breaks and incomplete styling when scrolling

Answer №1

Answer №2

Similar questions

EU directive on cookies: What is the best way to store your preferences?

How does Facebook access the new hashtags when they are clicked on?

Eliminate unnecessary gaps by using HTML to position images side by side without vertical space

Deactivate a button within a label container with the help of Javascript

Within the body class, text appears with a subtle shadow effect, however, the links within the body also inherit this shadow

The server is throwing a 403 error when trying to submit an AJAX request

Modifying the dimensions of mat-card in Angular Material

What is the code to make an arrow symbol in CSS that represents 'greater than' symbol?

The issue with the smooth scrolling feature in next/link has not been resolved

JS on-click function is not functioning

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

extracting the value of a chosen radio button in AngularJS using HTML

Scrollable Tailwind components

Creating a list of definitions in the form of an HTML table using a multidimensional array in

Creating a web form with the ability to select multiple images using Javascript

Responsive Button Sizing with Bootstrap 4

Troubleshooting Bootstrap 4 problem with varying sizes of div content

jQuery and ajax not functioning properly with disabled button

What is the best way to fill out a secondary drop

bxSlider adds in an empty slide after deleting an image