<pre> tag and css font-family

Question

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!

Answer 1

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.

Answer 2

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;
}

Answer 3

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 (eg 'Lucida Console') or the fall-back alias 'monospace';

Answer 4

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.)

Answer 5

不要为pre标签添加字体系列定义删除它并且每件事都没有问题或者如果你必须使用定义那么就不要使用tab来插入空格只使用空格键来插入空格..很多工作但是那就是希望这会有所帮助