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

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

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

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

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

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

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

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

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

Добавьте класс .uk-text-bold для создания жирного начертания шрифта.


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

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

Класс Описание
.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>
Документация
Компоненты