Как растянуть текст по ширине в css
Перейти к содержимому

Как растянуть текст по ширине в css

  • автор:

Как растянуть текст по ширине блока?

Каким образом можно решить такую задачу? Есть несколько div в которых лежат 2 текстовые строки «p». Текст в эти строки подставляется динамически пользователем при вводе в input. Шрифт у текста в каждом блоке разный. Размер шрифта в первой строке 25px, в нижней 20. Как сделать так, чтобы ширина текста была одинаковой, но при этом font-size второй строки был всегда меньше размера первой? https://gyazo.com/585a1b62e7338b2f8464c989c18661c2

Отслеживать

5,264 1 1 золотой знак 18 18 серебряных знаков 36 36 бронзовых знаков

задан 1 июн 2018 в 12:16

Александр Пикин Александр Пикин

47 2 2 серебряных знака 8 8 бронзовых знаков

А что вы понимаете под шириной текста? За счет чего текст должен становится шире?

1 июн 2018 в 12:32

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

1 июн 2018 в 12:40

Никак. Я в первой напишу «ШШШШШШШШШШШШШШШШШ», а во второй «i» — и что ты с этим сделаешь?

Как растянуть текст на всю ширину блока?

5b3a1df73775f276405652.jpeg

Есть блок (голубой на картинке) и текст. Как этот текст растянуть на весь блок?

  • Вопрос задан более трёх лет назад
  • 19584 просмотра

1 комментарий

Простой 1 комментарий

SecretBrain

SecretBrain @SecretBrain

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

Для выравнивания текста в блоке, например абзаце, применяется стилевое свойство text-align . Его значение justify и устанавливает выравнивание текста по ширине, т.е. сразу по левому и правому краю текстового блока (пример 1).

Пример 1. Выравнивание по ширине

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Выравнивание по ширине   

JPEG (Joint Photographic Experts Group) - популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные.

Результат примера показан на рис. 1.

Текст, выровненный одновременно по правому и левому краю

Рис. 1. Текст, выровненный одновременно по правому и левому краю

В данном примере свойство text-align применяется к селектору P , что заставляет весь текст в абзацах выравниваться по ширине. Учтите, что при таком способе выравнивания, скорее всего, появятся большие промежутки между словами в предложении.

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Как растянуть текст по ширине в css

Подскажите пожалуйста, как можно растянуть текст по ширине всего слоя

? Собственно, все выглядит так:
———————
Галерея скульптуры
галерея современной скульптуры и пластики
———————
Нужно чтобы эти обе надписи имели одну ширину.
Вариант с «text-align: justify» не подходит (не срабатывает), а через letter-spacing подбирать значения на глаз тоже не подходящий вариант.

Laravel/Vue expert
Старожил Подтвердите свой е-майл
Регистрация: 08.08.2007
Сообщений: 2,832

Как именно вы тогда собираетесь практически растягивать? За счет увеличения пространства между двумя этими словами?

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

Я не знаю, есть ли другие способы растянуть — вот потому и спросил
Может подскажете, есть ли способ растянуть эти слова в таком случае:
———————-

Галерея скульптуры

галерея современной скульптуры и пластики

———————-
То есть в случае, когда я знаю ширину обоих слоев — есть ли способ растянуть слова на одинаковую ширину?

Студент, не
Регистрация: 29.01.2009
Сообщений: 2,067

Действительно что-то не растягивается.

I am the First of Cyber Evolution.
I am the First to Program your Future.
Форумчанин
Регистрация: 15.11.2008
Сообщений: 285

Justify по идее не работает только в ie 5.5 и 6.0, но у меня вообще ни где не работает, мне кажется что через css поставленную задачу не решить. Можно js использовать но это жестоко будет.

Чем точнее и проще задан вопрос, тем проще на него получить точный ответ.
Последний раз редактировалось Deight; 26.02.2009 в 19:25 .
Студент, не
Регистрация: 29.01.2009
Сообщений: 2,067

Я тут посмотрел. «justify» работает, но для большого текста на несколько строк вниз. И чтоб слов в каждой строке было больше трёх.

Я думаю лучше будет сделать вручную картинку с текстом, и уже её растягивать (если нужно).

I am the First of Cyber Evolution.
I am the First to Program your Future.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *