White-space: pre; not working as expected; Technical Documentation project

HTML-CSS
1

Hey all,

I just completed the responsive web design project “Build a Technical Documentation Page”. There is one item that is bugging me, which I would like to resolve before moving on.

Here is a link to my pen: https://codepen.io/joe-devine/pen/mdVzbzP

I have the following css for my code elements:

background: #f2f2f2;
padding: 15px;
white-space: pre-wrap;
display: block;
margin: 10px;
border-radius: 5px;

My issue is that white-space is not being handled as I would expect. Tabs and line breaks seem to be stripped out, which makes the displayed code look poorly formatted. For example, instances where there should be double line break, only a single line break is displayed.

I’ve also tried just using white-space: pre; and it did not resolve my issue.

I appreciate any help!

https://codepen.io/joe-devine/pen/mdVzbzP

2

white-space: pre;
overflow-y: auto;

edit:

sorry wrong suggestion. my mistake.

3

Wrap your <code> blocks with <pre> tags. Seems superfluous to me, but worked.

4

Yeah, I did that originally. But I’m really trying to find a solution using CSS. The white-space: pre-wrap; setting retains white space correctly in other tests I’ve done. Just can’t figure out why it’s not working in this specific case.