Компонент Truncate в WordPress используется для сокращения текстового контента. Он позволяет ограничивать количество отображаемых символов или строк текста и добавлять многоточие для обозначения, что текст обрезан. Это экспериментальная функция, которая может измениться в будущих версиях.
Пример простого использования Truncate
import { __experimentalTruncate as Truncate } from '@wordpress/components';
function SimpleTruncateExample() {
return (
<Truncate>
Длинный текст, который требует обрезки. Этот текст может быть слишком длинным для отображения в одном блоке и поэтому сокращается для удобства.
</Truncate>
);
}
В этом примере Truncate обрезает текст в конце автоматически, если его длина превышает доступное пространство.
Свойства компонента Truncate
Рассмотрим все доступные свойства компонента Truncate, их типы и поведение. Эти свойства позволяют настраивать точное местоположение обрезки текста, символ многоточия и другие параметры.
1. children
- Тип:
ReactNode - Описание: Текст или элементы, которые будут обрезаны. Компонент работает с текстом типа
stringилиnumber. Если передать другие типы,Truncateне будет применять обрезку. - Обязательное: Да
<Truncate>
Пример длинного текста, который демонстрирует, как компонент обрезает текстовое содержимое, если оно превышает установленные пределы.
</Truncate>
2. ellipsis
- Тип:
string - Описание: Символ или строка, которая используется для обозначения обрезки текста. Например, можно использовать многоточие
...или любую другую строку. - Обязательное: Нет
- По умолчанию:
…
<Truncate ellipsis=" (далее)">
Этот текст сокращается с использованием пользовательской строки для обозначения обрезки.
</Truncate>
3. ellipsizeMode
- Тип:
'auto' | 'head' | 'tail' | 'middle' | 'none' - Описание: Определяет, где будет происходить обрезка текста:
auto: Обрезка происходит в конце текста автоматически.head: Обрезка в начале текста (требуетсяlimit).middle: Обрезка в середине текста (требуетсяlimit).tail: Обрезка в конце текста (требуетсяlimit).none: Обрезка не выполняется.
- Обязательное: Нет
- По умолчанию:
auto
<Truncate ellipsizeMode="middle" limit={20}>
Очень длинный текст для демонстрации, который будет обрезан в середине.
</Truncate>
В этом примере текст будет обрезан посередине, если его длина превышает limit.
4. limit
- Тип:
number - Описание: Определяет максимальное количество символов до обрезки текста. Работает с режимами
head,middleиtail. - Обязательное: Нет
- По умолчанию:
0
<Truncate ellipsizeMode="tail" limit={15}>
Пример текста, который будет обрезан на определённом количестве символов.
</Truncate>
Здесь текст будет обрезан в конце, если превышает 15 символов.
5. numberOfLines
- Тип:
number - Описание: Ограничивает отображение текста до указанного количества строк. При этом автоматически добавляется многоточие в конце. Это свойство игнорирует значение
ellipsis. - Обязательное: Нет
- По умолчанию:
0
<Truncate numberOfLines={2}>
Текст для демонстрации обрезки по строкам. Этот текст будет занимать не более двух строк, и, если он будет длиннее, появится многоточие.
</Truncate>
В этом примере текст будет ограничен двумя строками.
Пример 1: Обрезка в начале текста
<Truncate ellipsizeMode="head" limit={10} ellipsis="---">
Этот текст обрезан в начале, так как он длиннее установленного лимита.
</Truncate>
Пример 2: Обрезка текста в середине с кастомным многоточием
<Truncate ellipsizeMode="middle" limit={15} ellipsis=" [...] ">
Пример текста, который будет обрезан в середине, чтобы продемонстрировать возможность настройки символа многоточия.
</Truncate>
Пример 3: Обрезка по строкам
<Truncate numberOfLines={3}>
Этот текст предназначен для тестирования режима обрезки по строкам. При превышении трёх строк текст автоматически обрезается с добавлением многоточия.
</Truncate>
Заключение
Компонент Truncate в WordPress — это гибкий инструмент для управления длинным текстом, когда требуется его сократить для лучшего восприятия. Он позволяет выбирать различные варианты обрезки, задавать количество символов и строк, а также настраивать символ многоточия, что делает его удобным для использования в интерфейсах с ограниченным пространством для отображения текста.