How to use css to change <pre> font size

Question

pre{font-family:cursive;font-style:italic;font-size:xxx-small}

How to change pre font size?

Solution 1

While the font-size cannot be changed for text directly inside pre tags, you can always wrap that text in another element (a span, for example) and change the font size of that element.

For example (this is inline-styles, but could be put in CSS if you wanted):

<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>

Solution 2

Your issue is probably due to Courer being used as the default font, if you set Courier New as the preferred font it should be fine.

The following works fine in both Firefox & IE

pre {
   font-family: "courier new", courier, monospace;
   font-size: 11px;
}

Solution 3

If you only need to change the font size once, you can write

<pre style="font-size: 10px">
    ...
</pre>

Solution 4

Take a look here:

PRE - preformatted text

HTML tag

You cannot change font size within a PRE element (and you cannot put a PRE element inside a FONT element, for example), but the BASEFONT element affects preformatted text, too.

Solution 5

Here is the Demo

I am not quite sure why my browsers (chrome, FF, IE) doesn't agree!

Please let me know if I am missing something.

HTML

<pre>
Test
</pre>

css

pre {
    font-size: 100px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

Chrome

Firefox

IE

View more solutions

Comments

[kimon]

I almost didn't try this because I didn't think it could possibly work since the tag is inside the pre tag...but it does work (at least with the outlook html interpreter). Thanks!

[Jack]

If you are using <pre><code></code></pre>, remember to set pre code { white-space: pre; } to preserve line breaks.

[robbpriestley]

In Chrome it did change the font size, but "added" (?) significant spacing in between the lines, more or less nullifying the effect.

[Jankapunkt]

Second link is dead :(

[Leniel Maccaferri]

@Jankapunkt the page changed extension from .asp to .html. :) Thanks for the hint.

[drigoangelo]

it's always best to post an actual response (even copy/paste) instead of just the link to external resources, because websites and blogs may have a shorter life than stackoverflow

[Smock]

I've found this incredibly helpful when emailing powershell text output to a teams channel (need the preformatted so you don't lose column spacing + need a smaller font) +1