Truncate и обрезка длинного текста

Truncate в Carbon Components Svelte используется для управления отображением длинного текста в интерфейсе, чтобы предотвратить разрыв макета или переполнение контейнера. Этот компонент особенно полезен в таблицах, карточках и списках, где ограничено пространство для текста.

Основные концепции и свойства

Компонент Truncate реализует функционал усечения текста с визуальной подсказкой, что текст обрезан. Основные возможности включают:

  • Автоматическое усечение текста по ширине контейнера.
  • Отображение многоточия (…) при переполнении.
  • Поддержка адаптивного изменения размера контейнера.
  • Возможность добавления подсказки (tooltip) для полного текста.

Ключевые свойства компонента:

  • text — текст, который необходимо отобразить.
  • tooltip — булевое значение, определяющее, будет ли показываться подсказка с полным текстом при наведении.
  • lineClamp — количество строк, после которых происходит усечение текста.
  • truncateWidth — фиксированная ширина контейнера для усечения текста. Если не задано, компонент использует ширину родителя.

Пример использования:

<script>
  import { Truncate } from 'carbon-components-svelte';
  
  let longText = "Это очень длинный текст, который не помещается в одну строку и требует обрезки.";
</script>

<Truncate text={longText} tooltip={true} lineClamp={1} />

В этом примере текст будет отображаться в одной строке, и если он превышает ширину контейнера, появится многоточие. Наведение на текст вызовет подсказку с полным содержимым.

Настройка усечения текста по строкам

Свойство lineClamp позволяет управлять числом видимых строк до усечения. Оно полезно для блоков с фиксированной высотой, где необходимо показывать только часть текста:

<Truncate text={longText} tooltip={true} lineClamp={2} />

Если текст превышает две строки, компонент автоматически обрежет лишние строки и добавит многоточие. При этом, подсказка покажет полный текст.

Интеграция с сеткой и таблицами

Компонент Truncate часто применяется внутри таблиц и карточек для сохранения аккуратного вида. В таблицах рекомендуется использовать его вместе с TableHeader и TableCell:

<script>
  import { Table, TableHead, TableHeader, TableBody, TableRow, TableCell, Truncate } from 'carbon-components-svelte';

  let data = [
    { name: "Очень длинное название продукта", price: "$100" },
    { name: "Короткое имя", price: "$50" }
  ];
</script>

<Table>
  <TableHead>
    <TableRow>
      <TableHeader>Название</TableHeader>
      <TableHeader>Цена</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    {#each data as item}
      <TableRow>
        <TableCell>
          <Truncate text={item.name} tooltip={true} lineClamp={1} />
        </TableCell>
        <TableCell>{item.price}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

Такой подход обеспечивает:

  • Единый вид ячеек с длинными названиями.
  • Сохранение высоты строк таблицы.
  • Возможность показать полный текст через подсказку.

Динамическое изменение ширины контейнера

Если размер контейнера меняется динамически (например, при адаптивной верстке), компонент Truncate автоматически пересчитывает усечение текста. Для этого достаточно обернуть текст в блок с изменяемой шириной и включить tooltip:

<div style="width: 50%;">
  <Truncate text={longText} tooltip={true} />
</div>

При изменении ширины блока компонент обновляет отображение текста, сохраняя визуальное оформление.

Стилизация и кастомизация

Truncate использует встроенные стили Carbon Design System, но допускает кастомизацию:

  • Можно задать свой CSS класс для изменения цвета текста, шрифта или отступов.
  • Возможна интеграция с Svelte transitions для плавного появления подсказки.

Пример кастомизации:

<Truncate text={longText} tooltip={true} class="custom-truncate" />

<style>
  .custom-truncate {
    color: #0f62fe;
    font-weight: 500;
  }
</style>

Особенности использования

  • Поддержка многострочного текста: lineClamp позволяет использовать Truncate для блока с несколькими строками, не ломая макет.
  • Подсказка только при обрезке: если текст помещается полностью, подсказка не показывается, что улучшает UX.
  • Реактивность: компонент полностью поддерживает реактивные изменения текста в Svelte.

Truncate в Carbon Components Svelte — универсальный инструмент для аккуратного отображения длинного текста, поддерживающий адаптивность, подсказки и точную настройку под макет. Его правильное использование обеспечивает чистый интерфейс без потери информации.

Оглавление