Текст

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

Модификаторы стилей

UIkit 3 предлагает различные текстовые утилиты для оформления текстов.

Класс Описание
.uk-text-lead Добавьте этот класс для выделения текста, например, в подзаголовках статьи.
.uk-text-meta Добавьте этот класс к абзацу, который содержит информацию о статье.

Размеры шрифта

Следующие классы будут изменяют размер шрифта:

Класс Описание
.uk-text-small Уменьшает размер шрифта
.uk-text-large Увеличивает размер шрифта.

Жирность шрифта

Добавьте один из следующих классов для изменения насыщенности шрифта вашего текста.

Класс Описание
.uk-text-light Добавьте этот класс для применения свойства font-weight равного 300.
.uk-text-normal Добавьте этот класс для применения свойства font-weight равного 400.
.uk-text-bold Добавьте этот класс для применения свойства font-weight равного 700.
.uk-text-lighter Добавьте этот класс для применения свойства тонкого начертания.
.uk-text-bolder Добавьте этот класс, чтобы применить вес жирность шрифта.

Начертание шрифта

Добавьте класс .uk-text-italic для применения курсивного начертания.


Трансформация текста

Следующие классы преобразуют текст в заглавные, прописные или строчные буквы.

Класс Описание
.uk-text-uppercase Преобразует весь текст в верхний регистр.
.uk-text-capitalize Первый символ каждого слова станет заглавным.
.uk-text-lowercase Преобразует текст в нижний регистр.

Цвета текста

Используйте один из этих классов, чтобы применить другой цвет к тексту.

Класс Описание
.uk-text-muted Приглушенный текст
.uk-text-emphasis Акцентированный текст
.uk-text-primary Текст информационного сообщения
.uk-text-secondary Добавьте этот класс, чтобы выделить текст второстепенным цветом.
.uk-text-success Текст успешного выполнения процедуры
.uk-text-warning Текст предупреждения
.uk-text-danger Текст ошибки

Фон текста

Чтобы применить к тексту градиент или фоновое изображение, добавьте класс .uk-text-background к элементу <span>, расположенному внутри какого-либо тега. Стили, которые не определяют background-image, будут использовать основной цвет.

<h1><span class="uk-text-background"></span></h1>

Выравнивание

Список классов для выравнивания текста:

Класс Описание
.uk-text-left Выравнивание по левому краю.
.uk-text-right Выравнивание по правому краю.
.uk-text-center Выравнивание по центру.
.uk-text-justify Выравнивание по ширине.
  • Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-left
    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-right
    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-center
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-left uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-left</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-right uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-right</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-center</code>
                </div>
            </div>
        </div>
    </div>

Адаптивность

UIkit предоставляет ряд адаптивных классов для выравнивания. Они работают так же, как обычные классы выравнивания, но у них есть суффиксы, обозначающие контрольные точки, с которых они начинают работать.

Класс Описание
.uk-text-left@s
.uk-text-center@s
.uk-text-right@s
Работает на устройствах с разрешением экрана от 640px и больше .
.uk-text-left@m
.uk-text-center@m
.uk-text-right@m
аботает на устройствах с разрешением экрана от 960px и больше.
.uk-text-left@l
.uk-text-center@l
.uk-text-right@l
Aаботает на устройствах с разрешением экрана от 1200px и больше.
.uk-text-left@xl
.uk-text-center@xl
.uk-text-right@xl
Aаботает на устройствах с разрешением экрана от1600px и больше.
  • Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-center@s
    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-right@l
    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! .uk-text-center@m
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center@s uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-center@s</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-right@l uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-right@l</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center@m uk-card-body">
                    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду! <code>.uk-text-center@m</code>
                </div>
            </div>
        </div>
    </div>

Вертикальное выравнивание

Добавьте один из этих классов для вертикального выравнивания текста:

Класс Описание
.uk-text-top Выравнивание текста по верхнему краю.
.uk-text-middle Выравнивание текста по центру.
.uk-text-bottom Выравнивание текста по нижнему краю.
.uk-text-baseline Выравнивает текст по базовой линии родителя
  • Бычок качается
    Бычок качается
    Бычок качается
  • <div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
        <div>
            <img src="images/avatar.jpg" width="50" height="50">
            <span class="uk-text-top">Бычок качается</span>
        </div>
        <div>
            <img src="images/avatar.jpg" width="50" height="50">
            <span class="uk-text-middle">Бычок качается</span>
        </div>
        <div>
            <img src="images/avatar.jpg" width="50" height="50">
            <span class="uk-text-bottom">Бычок качается</span>
        </div>
    </div>

Перенос текста

Используйте следующие классы:

Класс Описание
.uk-text-truncate Запрещает перенос текста в несколько строк, включает его частичное скрытие и отображенет многоточие.
.uk-text-break Разбивает строки, если их длина превышает ширину контейнера.
.uk-text-nowrap Запрещает перенос текста в несколько строк.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <div class="uk-panel uk-panel-box uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div>
            <div class="uk-panel uk-panel-box uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
        </div>
    </div>