Как предотвратить перенос текста при transform: translate?

Question

[starostyants]

Блок до применения эффекта:


После:


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

Answer 1

[Павло Пономаренко]

Выглядит, что проблема не в Transform, а в том, что вы делаете шрифт жирным.

Comments

[starostyants]

Да, только сейчас это заметил. Если убрать font-weight: bold, то всё становится в порядке. Тогда вопрос в том, как сделать текст жирным и предотвратить при этом перенос?

[Павло Пономаренко]

starostyants, вам необходимо определиться - вы хотите, чтобы оно переносило или не хотите? Оно переносится потому что стало шире (как если бы вы дописали несколько символов).

Как совсем кривая альтернатива - поставьте между словами, переносить которые не хотите  .

Поймите, что вы сейчас хотите, чтобы оно автоматически переносило, но при этом хотите чтобы оно автоматически не переносило. Задача слишком сложная, увы.

Лучший вариант - изменить верстку. Делайте не жирным, а усиливайте цвет. Скажем неактивный пусть будет #444, а активный - #000. Ощущение будет то же, но ширина не будет изменяться.

Еще можно использовать какой-то моноширинный шрифт. Тогда независимо от ширины будет меняться жирнота.

Как совсем крайний вариант - можно попробовать letter-spacing: -1 для жирного начертания, но это будет лишь прибилизительно - вы не сможете точно сместить буквы на их жирноту.

[starostyants]

Павло Пономаренко, при всех имеющихся условиях самым подходящим решением становится отрицательный letter-spacing. Спасибо за Ваши ответы.

[Павло Пономаренко]

starostyants, и что - заработало корректно? Проверьте на крайних случаях. Вроде текста "WWW WWW WWW WWW" и "III III III III", которые вмещаются впритык.

[starostyants]

Павло Пономаренко, Проверял подобными группами: "|||| |||| ||||". Решил остановиться на letter-spacing: -0.2px. Для используемого шрифта (Muli) этого оказалось достаточным. Проверял в последних версиях браузеров, вроде всё ок. Понятно, что решение крайне кривое, но вполне рабочее. Если и возникнет ситуация, в которой вдруг возникнет перенос (а это с учетом выполненных проверок крайне маловероятно), то это не так критично, как отсутствие предусмотренного дизайном эффекта :)