I'm pretty new to html and css so forgive me if my question doesn't make 100% to any veterans. I am trying to apply a formatted line of code to a website using the element but it is using all of the white space before the lines. element for the code This is how it looks when I open the code in a browser I've tried adding the style="white-space: pre-line;" attribute to the element in the html but when I open the code in a browser it removes the indents that I want to be formatted into the lines. The incorrectly formatted lines after adding the style attribute
I am expecting the outcome to look like the image below. With the text formatted how css is normally coded and aligned to the left of the flexbox. I have tried other white-space values and nothing seems to work how I want. An image from my homework assignment describing how our website should look
This is the normal behaviour, because the <pre>
element's default style is white-space: pre;
. With that every space, new line, tab and other character are rendered as-is. So if you have spaces in the <pre>
element before the actual text, it will be rendered.
To solve your problem, remove the spaces or tabs before the code.