Как растянуть надпись в css

font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Синтаксис

Значения

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Рис. 1. Вид букв при разных значениях font-stretch

HTML5 CSS3 IE 9 Cr Op Sa Fx

    font-stretch p  Б Б Б Б Б Б Б Б Б

Браузеры

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Растянуть текст по высоте — CSS

CSS. Не полчучается растянуть DIV по всей высоте
вот он на лицо — http://kot.hut4.ru/ левый див с auto растягивается по содержимому, а с height.

Растянуть бэкграунд по высоте
Здравствуйте, форумчане! Не кидайтесь помидорками, пожалуйста, я знаю, что эта тема — давний.

Как растянуть li по высоте
Может кто подскажет, столкнулся я с такой такой задачей. Есть блок ul в нем находиться порядка 4-5.

Растянуть div на 100% по высоте
Похожие темы на форуме вроде есть, но ответа так и не нашел. Такая ситуация div внутри div’a.

Регистрация: 10.07.2018
Сообщений: 90

Лучший ответ

Сообщение было отмечено Joey как решение

Решение

p>Текст, который нужно растянуть/p>

1 2 3

p { transform: scale(1, 4); }

Как растянуть текст на всю длину страницы?

Как сделать так, чтобы параграф

занимал всю ширину страницы (или какую-то его часть) и при этом размер шрифта масштабировался? Так чтобы при разных размерах окна обозревателя высота шрифта была разной.
Отслеживать
6,343 5 5 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
задан 14 апр 2012 в 19:09
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак

У шрифта нет высоты, его размеры пропорциональны в зависимости от px! Переобоснуйте вопрос, ибо сейчас он выглядит за гранью фантастики! А учитывая заголовок вопроса, ответ от @Ёхарный Бабай вполне адекватен!

14 апр 2012 в 20:34
Могу ошибаться, но по-моему, тут без JS и только средствами CSS будет сложно справиться.
14 апр 2012 в 20:48
Наверное, JS + css свойство transform Вам помогут.
14 апр 2012 в 20:54
Если вас устраивает один из ответов поставте рядом с ним галочку
16 апр 2012 в 13:04

Не пойму. Так текст по умолчанию занимает всю ширину блока, вопрос в размере шрифта. А для адаптивности можно задать в em. Или я что-то не так понял?

30 мар 2018 в 12:15

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Как оказалось, задача элементарно решается в HTML5 с помощью встроенного SVG (проверено в Chrome и Firefox). Пример:

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 16 апр 2012 в 6:14
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
Отслеживать
ответ дан 14 апр 2012 в 19:10
Ёхарный Бабай Ёхарный Бабай
3,403 4 4 золотых знака 34 34 серебряных знака 50 50 бронзовых знаков

Читать:

Как убрать отступы в html

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

14 апр 2012 в 19:34

function onres() < var browwidth = document.documentElement.clientWidth; var myp = document.getElementById("myp"); myp.style.fontSize = browwidth / 5 + "px"; >window.onresize = onres; onres();

Это просто какой-то текст

Отслеживать
6,343 5 5 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
ответ дан 15 апр 2012 в 9:10
4,966 10 10 золотых знаков 33 33 серебряных знака 62 62 бронзовых знака

Давайте еще проще

Это просто какой-то текст

Отслеживать
ответ дан 14 дек 2021 в 12:35
1,508 10 10 серебряных знаков 27 27 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как выровнять текст по ширине?

Выравниванием по ширине называется такой способ форматирования текста, когда левый и правый края текста выравниваются по вертикальным линиям (рис. 1).

Рис. 1. Выравнивание текста по ширине

Для выравнивания правого края текста браузер добавляет пустые промежутки между слов, что иногда смотрится неаккуратно.

Чтобы выровнять текст по ширине ему достаточно добавить свойство text-align со значением justify , как показано в примере 1.

Пример 1. Использование text-align

В данном примере мы используем класс text-justify , который при добавлении его к любому элементу выравнивает текст по ширине.

Последняя строка нашего текста по умолчанию остаётся выровненной по левому краю. Для управления поведением последней строки есть отдельное свойство text-align-last. К примеру, значение right выравнивает по правому краю, а center — по центру (пример 2).

Пример 2. Использование text-align-last

См. также

text-align
text-align-last
Свойства текста в CSS