Как использовать css для изменения <pre class="prettyprint-override"> font size

Ответ 1

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

Например (это встроенные стили, но можно поместить в CSS, если хотите):

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

Ответ 2

Ваша проблема, вероятно, связана с тем, что Courer используется в качестве шрифта по умолчанию, если вы установите Courier New в качестве предпочтительного шрифта, это должно быть хорошо.

Следующее прекрасно работает как в Firefox, так и в IE

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

Ответ 3

Взгляните сюда:

PRE - предварительно отформатированный текст

HTML-тег

Вы не можете изменить размер шрифта в пределах Элемент PRE (и вы не можете поставить PRE элемент внутри элемента FONT, для пример), но элемент BASEFONT также влияет на предварительно отформатированный текст.

Ответ 4

Если вам нужно только один раз изменить размер шрифта, вы можете написать

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

Ответ 5

Вот Демо

Я не совсем уверен, почему мои браузеры (хром, FF, IE) не согласны!

Пожалуйста, дайте мне знать, если я что-то упустил.

HTML

<pre>
Test
</pre>

CSS

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

Хром

Firefox

IE

Ответ 6

Я думаю, что это может иметь какое-то отношение к стандартным шрифтам, поддерживаемым разными браузерами. Попробуйте использовать свой код в разных браузерах, но помните, что IE не совместим с W3.

Ответ 7

Извините, что выкопал старую проблему. После поиска высоких и низких значений "почему браузеры (особенно мобильные браузеры) отображают текст тега <pre> слишком маленький и нечитабельный", я нашел здесь предложение, изменив css font-size: на em. Но getcha em для <pre> имеет размер эффектов по-разному в настольном браузере, а затем на мобильном браустере. Четкое несоответствие, заметное на Android-телефоне Samsung/Mozilla/Chrome, увеличивает размер шрифта меньше для того же значения em, а затем для настольных браузеров. Решением этой дилеммы является использование % вместо em.

Правило css pre{font-size:200%;}, по-видимому, увеличивает текст <pre> более последовательно (по сравнению с другими текстами) в мобильном браузере, как это делается на рабочем столе браузера.

Ответ 8

Одним из решений для фиксации размера шрифта в тегах pre является использование:

pre
{
    white-space: pre-wrap !important;
}

Это фиксирует размеры шрифтов в мобильных браузерах, которые не могут точно определить ширину элемента pre.

Источник: Размер шрифта предварительного тега на мобильных устройствах становится слишком большим - исправление