Компонент Текст : Text

Оформление текста. Коллекция полезных вспомогательных классов для стилизации вашего текста, контента. Различные утилиты для оформления вашего текста.

Модификатор «Стиль»

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

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

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

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

Класс Описание
.uk-text-small Добавьте этот класс, чтобы уменьшить размер шрифта.
.uk-text-default Размер шрифта по умолчанию. Работает с версии 3.5.5
.uk-text-large Добавьте этот класс, чтобы увеличить размер шрифта.

Насыщенность шрифта

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

Класс Описание
.uk-text-light Добавьте этот класс, чтобы применить значение 300.
.uk-text-normal Добавьте этот класс, чтобы применить нормальное начертание 400.
.uk-text-bold Добавьте этот класс, чтобы применить полужирное начертание 700.
.uk-text-lighter Изменяет начертание относительно насыщенности родительского элемента
(сверхтонкое начертание).
.uk-text-bolder Изменяет начертание относительно насыщенности родителя элемента
(сверхжирное начертание).

Font Style

Добавив класс .uk-text-italic будет применен шрифт который классифицирован как italic, курсивное начертание.


Преобразование текста

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

Класс Описание
.uk-text-uppercase Добавьте этот класс для преобразования текста в верхний регистр.
.uk-text-capitalize Добавьте этот класс, чтобы преобразовать ваш текст в заглавные.
.uk-text-lowercase Добавьте этот класс для преобразования текста в нижний регистр.

Цвет текста

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

Класс Описание
.uk-text-muted Добавьте этот класс, чтобы приглушить цвет текста.
.uk-text-emphasis Добавьте этот класс для выразительности текста.
.uk-text-primary Добавьте этот класс, чтобы выделить текст с использованием основного цвета (primary color).
.uk-text-secondary Добавьте этот класс, чтобы выделить текст второстепенным цветом (secondary color).
.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">
                    Душа моя озарена неземной радостью, как эти чудесные весенние утра.<br> <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">
                    Душа моя озарена неземной радостью, как эти чудесные весенние утра.<br> <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">
                    Душа моя озарена неземной радостью, как эти чудесные весенние утра.<br> <code>.uk-text-center</code>
                </div>
            </div>
        </div>
    </div>

Отзывчивость

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

Класс Описание
.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
Влияет на ширину устройства от 1200px и более.
.uk-text-left@xl
.uk-text-center@xl
.uk-text-right@xl
Влияет на ширину устройства от 1600px и более.
  • Душа моя озарена неземной радостью, как эти чудесные утра.
    .uk-text-center@s
    Душа моя озарена неземной радостью, как эти чудесные утра.
    .uk-text-right@l
    Душа моя озарена неземной радостью, как эти чудесные утра.
    .uk-text-center@m
  • <div class="uk-grid-match uk-child-width-1-2@s uk-grid-small uk-flex-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center@s uk-card-body">
                    Душа моя озарена неземной радостью, как эти чудесные утра.<br> <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">
                    Душа моя озарена неземной радостью, как эти чудесные утра.<br> <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">
                    Душа моя озарена неземной радостью, как эти чудесные утра.<br> <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="/demo/img/avatar3.jpg" width="50" height="50">
            <span class="uk-text-top">Текст сверху.</span>
        </div>
        <div>
            <img src="/demo/img/avatar3.jpg" width="50" height="50">
            <span class="uk-text-middle">Текст по ценру.</span>
        </div>
        <div>
            <img src="/demo/img/avatar3.jpg" width="50" height="50">
            <span class="uk-text-bottom">Текст снизу.</span>
        </div>
    </div>

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

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

Класс Описание
.uk-text-truncate Предотвращает перенос текста в несколько строк, текст обрезается и отображениется многоточие.
.uk-text-break Разбивает строки, если их длина превышает ширину их контейнера.
.uk-text-nowrap Предотвращает перенос текста в несколько строк; весь текст в одну строку.
  • Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.
    Душамояозаренанеземнойрадостью,какэтичудесныевесенниеутра,которымиянаслаждаюсьотвсегосердцаЯсовсемодиниблаженствуювздешнемкраю.
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <div class="uk-panel uk-panel-box uk-text-truncate">Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.</div>
        </div>
        <div>
            <div class="uk-panel uk-panel-box uk-text-break">Душамояозаренанеземнойрадостью,какэтичудесныевесенниеутра,которымиянаслаждаюсьотвсегосердцаЯсовсемодиниблаженствуювздешнемкраю.</div>
        </div>
    </div>
Документация
Компоненты