Документация UIkit 3 на русском

Главная
Тексты

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

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

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>