Как сжать/растянуть текст в css
Оригинальный текст 
Растянутый текст на 50% 
Сжатый текст на 50% 
Отслеживать
задан 9 мая 2020 в 9:39
Илья Кузьмич Илья Кузьмич
333 2 2 серебряных знака 14 14 бронзовых знаков
transform:scaleX/Y
9 мая 2020 в 9:41
@MaximLensky спасибо!
9 мая 2020 в 10:49
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
body < margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; >h1
Текст
Отслеживать
ответ дан 9 мая 2020 в 9:43
Михаил Камахин Михаил Камахин
8,727 2 2 золотых знака 19 19 серебряных знаков 58 58 бронзовых знаков
Ну, почти. Вместо scale(8, 6) нужно либо scaleX(1.5), либо scaleX(0.5).
9 мая 2020 в 10:50
@ИльяКузьмич ну да, это просто пример, scale(8, 6) это по X и Y
9 мая 2020 в 10:53
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420
Как растянуть по ширине одну строку текста, например заголовок, не используя text-align-last?
Можно использовать text-align-last, но он много где не работает. Можно было бы сделать вот так
.text < text-align: justify; >.text::after
Но блок получается слишком высоким, из-за line-height блока after и не становится меньше, если на нем это свойство ручками задать. Вижу выход в задании фиксированной высоты блоку text. Но ощущаю, что стою на костылях. Можно это сделать как-то по-красивее?
Отслеживать
задан 26 мар 2019 в 9:08
Данил Кирин Данил Кирин
1 1 1 серебряный знак 2 2 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если нужно, чтобы на любых размерах экрана заголовок был растянут во всю ширину, можно задать font-size в единицах измерения vw:
какой-то заголовок тут висит
Отслеживать
ответ дан 26 мар 2019 в 9:29
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 49 49 бронзовых знаков
Растянуть текст по ширине div
У меня есть div с фиксированной шириной, но текст внутри div может измениться. Есть ли способ установить с помощью css или другого интервала между буквами, чтобы текст всегда заполнял div идеально?
Curt 12 май 2011, в 12:37
Поделиться
Вы хотите изменить «spacing between the letters» (как в letter-spacing ) или font-size ? Изменить: или, как в ответе @SmudgerDan’s SmudgerDan, расстояние между словами ?
thirtydot 12 май 2011, в 10:02
Интервал и размер шрифта могут быть скорректированы, чтобы обеспечить формат блока
Curt 12 май 2011, в 10:11
почему не выравнивание текста: оправдать?
George Katsanos 07 фев. 2013, в 16:15
@GeorgeKatsanos GeorgeKatsanos Я считаю, что «text-align: justify» не всегда правильно заполняет область. Например, если у меня есть div с шириной 300 пикселей, с текстовым содержимым «Lorem Ipsum», это не растягивает, чтобы заполнить область
Curt 07 фев. 2013, в 16:29
@Curt Курт, выравнивание текста: оправдание может работать. Смотрите мой ответ ниже
Aakil Fernandes 09 апр. 2014, в 00:42
Показать ещё 3 комментария
Поделиться:
7 ответов
Как сказал Марк, text-align:justify; является самым простым решением. Однако для короткого текста это не будет иметь никакого эффекта. Следующий код jQuery растягивает текст до ширины контейнера.
Он вычисляет пространство для каждого символа и устанавливает letter-spacing соответственно, чтобы текст растягивался до ширины контейнера.
Если текст слишком длинный для размещения в контейнере, он позволяет ему расширяться до следующих строк и устанавливает text-align:justify; в текст.
Вот демонстрационная версия:
$.fn.strech_text = function()< var elmt = $(this), cont_width = elmt.width(), txt = elmt.html(), one_line = $('' + txt + ''), nb_char = elmt.text().length, spacing = cont_width/nb_char, txt_width; elmt.html(one_line); txt_width = one_line.width(); if (txt_width < cont_width)< var char_width = txt_width/nb_char, ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; one_line.css(); > else < one_line.contents().unwrap(); elmt.addClass('justify'); >>; $(document).ready(function () < $('.stretch').each(function()< $(this).strech_text(); >); >);p < width:300px; padding: 10px 0;background:gold;>a .stretch_it < white-space: nowrap; >.justify < text-align:justify; >.one .two .three .four .arial
Stretch me
Stretch me
Stretch link
I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.
Stretch me
Stretch me
Stretch me
Don't stretch me
Css растянуть текст на всю ширину
Что значит выровнять текст по ширине? Это значит, что он будет прижат к обоим сторонам, его края слева и справа будут ровными. Чтобы браузер не растягивал пробелы, отчего текст становится плохо читаемым, нужно настроить перенос слов. Реализуется он очень просто с помощью того же CSS. Даже дефисы при необходимости ставятся с соблюдением правил русского языка.
Как выровнять меню по ширине
Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.
Поддержка браузерами ограничена, но можно немного пошаманить:
Как выровнять картинки по ширине
Как равномерно распределить блоки, если сайт резиновый
Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.
По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
- left — выравнивает текст по левому краю.
- right — выравнивает текст по правому краю.
- center — выравнивает текст по центру.
- justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
Читайте также: Safenet ikey 1000 driver windows 7 64
Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.
Для выравнивания текста в блоке, например абзаце, применяется стилевое свойство text-align . Его значение justify и устанавливает выравнивание текста по ширине, т.е. сразу по левому и правому краю текстового блока (пример 1).
Пример 1. Выравнивание по ширине
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 1.
Рис. 1. Текст, выровненный одновременно по правому и левому краю
В данном примере свойство text-align применяется к селектору P , что заставляет весь текст в абзацах выравниваться по ширине. Учтите, что при таком способе выравнивания, скорее всего, появятся большие промежутки между словами в предложении.