Как растянуть текст по ширине блока?
Каким образом можно решить такую задачу? Есть несколько 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» — и что ты с этим сделаешь?
Как растянуть текст на всю ширину блока?
Есть блок (голубой на картинке) и текст. Как этот текст растянуть на весь блок?
- Вопрос задан более трёх лет назад
- 19584 просмотра
1 комментарий
Простой 1 комментарий
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.