<pre> tag and css font-family

I have html with code below:

<pre>
                                      |       Date Offense |       Count |
   Title, Section & Nature of Offense |          Concluded |   Number(s) |
--------------------------------------------------------------------------
              18:2113(a)-BANK ROBBERY |   January 27, 2009 |           I |
-----------------------------------------------------------------------开发者_开发百科---

</pre>

It works perfect in a simple page, but when I have added css with font-family defination, it performs ugly, the format is not tidy any more.

Any suggestions? Thanks!

---

You must use a monospace font (also known as typewriter font). That is a font in which all the characters take the same space.

In CSS the font name monospace is translated to the default monospace font on the user system. It's good practice to include monospace at the end of a font-familly list for the <pre> element so that it can be used as a fallback.

For instance:

pre {font-family: Consolas,monospace}

will use the Consolas monospace font if it's available or fallback to the default.

---

Surprising! When I have posted this question, the display of Stackoverflow is just what I want.

So the solution is:

pre
{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

---

The default definition for the pre tag uses the monospace font (like in console).

font-family: monospace;

It is possible your definition suggests a different type of a font which is why your nice design breaks. You must either specify a system-specific monospace font (e.g. 'Lucida Console') or the fall-back alias 'monospace';

---

The best answer seems to be How to use css to change <pre> font size :

From that answer: (referring to the text inside the pre)

...you can always wrap that text in another element (a span, for example) and change the font size of that element.

(Don't forget to upvote his answer there.)

---

Do not add font family definition for pre tag Remove it and every thing will be fine Or if you have to use the definition then do not use the tab to insert spaces Use space bar only to insert spaces.. Lot of work but that is the way to go Hope this helps