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

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

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

Класс	Описание
`.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, курсивное начертание.

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

text-transform

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

Класс	Описание
`.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>

Градиентный текст

Текст с фоновым изображением

<h3>
	<span class="uk-text-background uk-background-cover uk-text-bold" 
	      style="background-image: url(images/photo.webp);">
		Текст с фоновым изображением
	</span>
</h3>

Выравнивание текста

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

Класс	Описание
`.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="images/ava/avatar-3.webp" width="50" height="50" loading="lazy" alt="Аватарка 1">
        <span class="uk-text-top">Текст сверху.</span>
    </div>
    <div>
        <img src="images/ava/avatar-3.webp" width="50" height="50" loading="lazy" alt="Аватарка 2">
        <span class="uk-text-middle">Текст по ценру.</span>
    </div>
    <div>
        <img src="images/ava/avatar-3.webp" width="50" height="50" loading="lazy" alt="Аватарка 3">
        <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-text-truncate">
        	Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.
        </div>
    </div>
    <div>
        <div class="uk-panel uk-text-break">
        	Душамояозаренанеземнойрадостью,какэтичудесныевесенниеутра,которымиянаслаждаюсьотвсегосердцаЯсовсемодиниблаженствуювздешнемкраю.
        </div>
    </div>
</div>

Обводка текста

Добавьте класс .uk-text-stroke для создания контурного заголовка.

Small

Medium

Large

X-Large

2X-Large

3X-Large

<h3 class="uk-heading-small uk-text-stroke">Small</h3>
<h4 class="uk-heading-medium uk-text-stroke">Medium</h4>
<h5 class="uk-heading-large uk-text-stroke">Large</h5>
<div class="uk-heading-xlarge uk-text-stroke">X-Large</div>
<div class="uk-heading-2xlarge uk-text-stroke">2X-Large</div>
<div class="uk-heading-3xlarge uk-text-stroke">3X-Large</div>

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