Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Умный, адаптивный текстовый jQuery плагин - TextTailor.js

Дата добавления: 29.01.2019 - 23:17
Добавил: Buger
Количество просмотров: 61
Количество комментариев: 0
Размер файла: 15.4 Kb
Рейтинг материала: 0.0 / 0
Умный, адаптивный текстовый jQuery плагин - TextTailor.js
рейтинг 0.0
/
голосов 0
TextTailor.js - это плагин jQuery, разработанный для адаптивного веб-дизайна, который автоматически изменяет размер шрифта, чтобы ваш текст помещался в его родительский контейнер.

Плагин также имеет возможность скрыть переполненный текст с помощью многоточия на тот случай, если ваш текст не соответствует высоте (фиксированной или процентной) родительского контейнера.

Основное использование:


1. У вас должна быть подключена последняя версия библиотеки jQuery.

2. Подключите jQuery плагин texttailor.js внизу вашей адаптивной веб-страницы.
Код
<script src="jquery.texttailor.js"></script>


3. Оберните ваш текст в элемент контейнера.
Код
<div class="demo">
  Здесь будет ваш текст...
</div>


4. Задайте высоту (фиксированную или в процентах) элементу контейнера в CSS.
Код
.demo {
  width: xx%;
  height: xx%;
}


5. Далее нам нужно вызвать плагин на контейнере, чтобы активировать реагирующий текст.
Код
$('.demo').textTailor();


6. Вы можете использовать доступные опции:
Код
$('.demo').textTailor({
  ...,
  ...
});

minFont: 1 - минимальный шрифт (используется с fit: true)
maxFont: 9999 - максимальный шрифт (используется с fit: true)
preWrapText: false - добавляет css -> white-space: pre-line
lineHeight: 1.45 - свойство line-height
resizable: true - для изменения размера окна
debounce: false - используется с resizable: true
fit: true - подгоняет текст по высоте и ширине родителя
ellipsis: true - добавляет многоточие к тексту, если он не влезает в контейнер
center: false - абсолютный центр относительно родителя
justify: false - добавляет css -> text-align: justif
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: