Растянуть текст по длине блока

16 сентября 2014 г. 0:37

Есть несколько способов растянуть текст по ширине блока или страницы адаптивным образом.

1. Использование css-трансформации scale

Данный код позволяет менять размер шрифта в зависимости от ширины браузера:

<!-- test.html -->
<div class="test">Произвольный текст</div>
// script.js
var $window = $(window), $body = $('body'), $wrap = $('.wrap'), defaultWidth = 1000;
     
$window.resize(function () {
    $wrap.css({transform: 'scale(' + $window.width() / defaultWidth  + ')'});
    var height = $wrap.outerHeight(true);
}).resize();
/* styles.css */
.test {font-size: 72px;}

Немного доработав код, вы можете растянуть текст не только на всю длину страницы, но и на длину конкретного блока.

2. Использование параметра font-size

Есть ещё другой способ заставить шрифт растягиваться по длине блока:

<!-- test.html -->
<div class="test">Произвольный текст</div>
// script.js
$(function () {
    var $test = $('.test');
    var k = 1;

    $(window).resize(function(){
        var val = $test.width();
        $test.css('font-size', Math.floor(val/k)+'%');
    }).resize();
});

Метод основан на использовании css-параметра font-size. Параметром k подгоняется шрифт под размеры блока. Имейте ввиду, что значение font-size, выраженный в процентах, вычисляется не от ширины блока, а от размера шрифта родительского блока, поэтому параметр k подгоните под себя.

3. Использование svg

Данный способ хорош тем, что не нужно использовать javascript. В данном пункте приведу более сложный пример использования svg: будем использовать многострочный текст, выравненный по центру.

Добавляем svg-код на страницу html:

<!-- test.html -->
<div class="svg_test">
    <svg width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <text x="50%" y="14" font-size="14">Длинная строка 1</text>
        <text x="50%" y="30" font-size="14">Строка 2</text>
    </svg>
</div>

Добавляем стили:

/* styles.css */
.svg_test text {text-anchor: middle;}

Смысл такого способа в том, что мы растягиваем наш svg на всю ширину блока, используя width="100%", а для каждого текстового элемента задаём перемещение по оси X в 50%, и наконец, добавляем text-anchor: middle; для выравнивания текста относительно заданного перемещения по оси X. Опять таки, и здесь нужна подгонка параметром.

В каждом представленном способе есть свои плюсы и минусы. Однозначно точно растянуть текст по ширине, как вы видите, не получится. Придётся всё равно подгонять размер шрифта под длину блока. Но тем не менее, подогнав размер под свой блок, вы получите резиновый текст, который адаптируется под различные устройства.

Если же вы хотите точно подогнать шрифт по длине блока, то используйте текст как картинку. Конечно, это извращение, и имеет смысл использовать это при крайней необходимости.

Оцените статью

0 из 5 (всего 0 оценок)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/proportional-increase-font-size/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Артём Мальцев
Ссылка на статью: <a href="https://vivazzi.pro/ru/it/proportional-increase-font-size/">https://vivazzi.pro/ru/it/proportional-increase-font-size/</a>

Больше: Правила использования сайта

Для тех, кто продаёт через свой профиль в соц. сетях: моя сестра, Анастасия Мальцева запустила свой курс: «Комфортные продажи через контент»

Все знания построены на собственном опыте и имеют хороший результат, поэтому если вы продаёте товары или услуги и хотите повысить эффективность вашего аккаунта или сайта, то курс будет для вас полезен!

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

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

Комментарии: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц