Компонент Текст 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,
курсивное начертание.
Преобразование текста
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>
Текст с фоновым изображением
Выравнивание текста
Добавьте один из этих классов для выравнивания текста.
Класс | Описание |
---|---|
.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-text-truncate"> Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю. </div> </div> <div> <div class="uk-panel uk-text-break"> Душамояозаренанеземнойрадостью,какэтичудесныевесенниеутра,которымиянаслаждаюсьотвсегосердцаЯсовсемодиниблаженствуювздешнемкраю. </div> </div> </div>