Перейти к содержимому

D2N Core

← Все компонентыБазовые

CoreText

Примеры использования и документация.

Базовый текстовый блок для основного контента страницы: абзацы, подписи, списки — везде, где нужен просто текст без лишней обёртки. Позволяет ограничить длину визуально, не обрезая данные: длинные описания схлопываются до заданного числа строк с многоточием, и карточка или таблица сохраняет аккуратную высоту.

Технические детали: рендерится любым тегом через проп as (по умолчанию p). maxLines ограничивает число строк — лишнее обрезается многоточием через CSS line-clamp (миксин core-line-clamp, класс-модификатор core-text--clamped применяется только при заданном ограничении, чтобы -webkit-box без него не резал контент). Содержимое — слот default.

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

p · max-lines="1" — одна строка

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

p · max-lines="2"

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

p · text-sm + max-lines="3"

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

p · без max-lines — не обрезается

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

strong · полужирный + max-lines="2"

Средний абзац: на ширине карточки занимает две-три строки — лимит строк виден сразу

em · курсив + max-lines="2"

Средний абзац: на ширине карточки занимает две-три строки — лимит строк виден сразу

small · мелкий без ограничений

label · max-lines="1"

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

blockquote · цитата + max-lines="3"

Средний абзац: на ширине карточки занимает две-три строки — лимит строк виден сразу

figcaption · приглушённая подпись

Очень длинный абзац текста, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreText на любой ширине контейнера

div · блочный + max-lines="2"

Короткий текст

p · короткий текст не режется

Абзац, где span идёт инлайном прямо внутри текста — второй span приглушён, перенос строки их не разрывает.

span · инлайн внутри абзаца