<pre> tag和css font-family

Question

我有以下代碼的HTML：

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

</pre>

它在一個簡單的頁面中工作得很完美，但是當我添加了帶有font-family defination的css時，它表現得很難看，格式不再整齊。

有什么建議？ 謝謝！

Answer 1

您必須使用等寬字體（也稱為打字機字體）。 這是一種所有字符占用相同空間的字體。

在CSS中，字體名稱monospace被轉換為用戶系統上的默認等寬字體。 最好在<pre>元素的font-familly列表的末尾包含monospace ，以便它可以用作后備。

例如：

pre {font-family: Consolas,monospace}

將使用Consolas monospace字體（如果可用）或回退到默認值。

Answer 2

奇怪！ 當我發布這個問題時，Stackoverflow的顯示就是我想要的。

所以解決方案是：

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

pre標簽的默認定義使用等寬字體（如在控制台中）。

font-family: monospace;

你的定義可能會提出一種不同類型的字體，這就是為什么你的設計好了。 您必須指定系統特定的等寬字體（例如'Lucida Console'）或后備別名'monospace';

Answer 4

最好的答案似乎是如何使用css來改變<pre>字體大小 ：

從這個問題的答案：（指內的文本pre ）

...您始終可以將該文本包裝在另一個元素（例如span）中，並更改該元素的字體大小。

（不要忘記在那里提出他的答案。）

Answer 5

不要為pre標簽添加字體系列定義刪除它並且每件事都沒有問題或者如果你必須使用定義那么就不要使用tab來插入空格只使用空格鍵來插入空格..很多工作但是那就是希望這會有所幫助