Есть ли кроссбраузерный способ уплотнения текста на странице?

может быть

letter-spacing:-1px

помогу

Вы уверены, что правильно указываете типы документов? Возможно, ваши браузеры интерпретируют ваш CSS в режиме причуд, что приводит к непредсказуемому поведению.

Я не думаю, что jQuery сильно поможет вам, если letter-spacing не работает должным образом. Вы не можете изменить положение отдельных букв, если каждая буква не находится внутри своего собственного элемента, такого как span, который просто кажется беспорядочным.

Обновлено: Если вы хотите уменьшить ширину самих символов по горизонтали, теоретически это можно сделать, например, с помощью font-stretch: narrower. Но похоже, что основной браузер не поддерживает это должным образом или вообще не поддерживает. Очевидно, это было в CSS2, но затем было убрано в CSS2.1 и теперь планируется для CSS3.

Это похоже на кошмар.

Вы можете обмануть все это, поместив каждое слово, если плавающий DIV, и возиться с шириной каждого DIV.

Я думаю, что такие вещи, вероятно, следует делать в графическом редакторе и выводить в легкое изображение (png или подобное). Я думаю, что это единственный простой и надежный способ до такой степени контролировать визуальный вывод текста.

Убедитесь, что вы повторяете текст в атрибуте альт в теге img для доступности.

У этого подхода есть проблемы с локализацией - вам нужна версия для каждой локали, - но это все еще выполнимо.

Также могут возникнуть проблемы, если вы хотите, чтобы этот текст находился на одном уровне с другим текстом - например, в середине абзаца. Но если это то, что делается, похоже, что «сжатый текст» на самом деле не может быть хорошим пользовательским интерфейсом.

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

Что вы хотите сделать, так это изменить шрифт текста. Я думаю, вам лучше всего просмотреть кучу разных шрифтов, которые предустановлены для вашей пользовательской базы, и попытаться найти лучшую комбинацию шрифт + размер.

Короткий ответ: Я не думаю, что существует работающий пример кроссбраузерности, который бы отвечал вашим требованиям.

Спецификация CSS3 включает свойство font-stretch, но, к сожалению, CSS3 почти не поддерживается (если вообще поддерживается) в настоящее время.

Некоторые возможные способы, которые могут привести к такому поведению подражать, о которых я могу думать:

• Используйте подход на основе флэш-памяти, например sIFR
• Используйте подход на основе javascript / холста, например Typeface.js. В пример страницы есть пример font-stretch.
• Используйте сжатые шрифты (неприглядный подход, поскольку это означает, что вы полагаетесь на шрифт, доступный для клиента), например Arial Narrow.
• Используйте серверный скрипт, который генерирует изображение из текстовых параметров.

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

Если это невозможно, я определенно рекомендую изучить Шрифт и sIFR.

Итак, вы хотите сжать его, но не раздавить?

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

.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }

Вы можете отследить исходный шрифт с помощью WhatTheFont

Спустя десять лет font-stretch все еще практически не поддерживается. Но transform:scaleX(); подойдет. Здесь.