<pre class="prettyprint-override"> tag and css font-family

У меня есть html с кодом ниже:

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

</pre>

Он отлично работает на простой странице, но когда я добавил css с definity font-family, он выполняет уродливые, формат больше не убирается.

Любые предложения? Спасибо!

Ответ 1

Вы должны использовать моноширинный шрифт (также известный как шрифт пишущей машинки). Это шрифт, в котором все символы занимают одно и то же пространство.

В CSS имя шрифта monospace переводится в моноширинный шрифт по умолчанию в пользовательской системе. Хорошей практикой является включение monospace в конец списка font-familly для элемента <pre>, чтобы его можно было использовать в качестве резервной копии.

Например:

pre {font-family: Consolas,monospace}

будет использовать моноширинный шрифт Consolas, если он доступен или отменит значение по умолчанию.

Ответ 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;
}

Ответ 3

В определении по умолчанию для тега pre используется моноширинный шрифт (например, на консоли).

font-family: monospace;

Возможно, ваше определение предлагает другой тип шрифта, поэтому ваш красивый дизайн ломается. Вы должны либо указать системный шрифт моноширины (например, "Lucida Console" ), либо пассивный псевдоним "monospace";

Ответ 4

Лучший ответ кажется Как использовать css для изменения <pre> размер шрифта:

Из этого ответа: (ссылаясь на текст внутри pre)

... вы всегда можете перенести этот текст в другой элемент (span, для пример) и изменить размер шрифта этого элемента.

(Не забудьте оставить там свой ответ.)

Ответ 5

Не добавляйте определение семейства шрифтов для предварительного тега Удалите его, и все будет хорошо Или если вам нужно использовать определение, то не используйте вкладку для вставки пробелов Используйте пробел только для вставки пробелов. Много работы, но это путь. Надеюсь, что это поможет