Как предотвратить перенос текста при transform: translate?
Блок до применения эффекта:
После:
Как предовтратить подобный перенос? Также нужно учесть, что блок может быть многострочным. Transform можно заменить на любой другой, главное, чтобы эффект был подобным
Да, только сейчас это заметил. Если убрать font-weight: bold, то всё становится в порядке. Тогда вопрос в том, как сделать текст жирным и предотвратить при этом перенос?
starostyants, вам необходимо определиться - вы хотите, чтобы оно переносило или не хотите? Оно переносится потому что стало шире (как если бы вы дописали несколько символов).
Как совсем кривая альтернатива - поставьте между словами, переносить которые не хотите .
Поймите, что вы сейчас хотите, чтобы оно автоматически переносило, но при этом хотите чтобы оно автоматически не переносило. Задача слишком сложная, увы.
Лучший вариант - изменить верстку. Делайте не жирным, а усиливайте цвет. Скажем неактивный пусть будет #444, а активный - #000. Ощущение будет то же, но ширина не будет изменяться.
Еще можно использовать какой-то моноширинный шрифт. Тогда независимо от ширины будет меняться жирнота.
Как совсем крайний вариант - можно попробовать letter-spacing: -1 для жирного начертания, но это будет лишь прибилизительно - вы не сможете точно сместить буквы на их жирноту.
starostyants, и что - заработало корректно? Проверьте на крайних случаях. Вроде текста "WWW WWW WWW WWW" и "III III III III", которые вмещаются впритык.
Павло Пономаренко, Проверял подобными группами: "|||| |||| ||||". Решил остановиться на letter-spacing: -0.2px. Для используемого шрифта (Muli) этого оказалось достаточным. Проверял в последних версиях браузеров, вроде всё ок. Понятно, что решение крайне кривое, но вполне рабочее. Если и возникнет ситуация, в которой вдруг возникнет перенос (а это с учетом выполненных проверок крайне маловероятно), то это не так критично, как отсутствие предусмотренного дизайном эффекта :)
