# Truncate

Truncate wird verwendet, um zu lange Texte automatisch zu kürzen, sodass sie in ein vorgegebenes Layout passen. Dabei wird der entsprechende Text durch "..." abgekürzt.

## Overview

# Playground

Verwende `<Truncate />`, um einzelne Textzeilen in platzbeschränkten Layouts
darzustellen.

  Accessibility-Warnung

    Die Component verwendet das
    [title-Attribut](https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute),
    um den vollständigen Inhalt sichtbar zu machen. Für Tastatur-User ist dieses
    jedoch nicht zugänglich, da Browser keine Möglichkeit bieten,
    `title`-Tooltips per Tastatur anzuzeigen. Verwende `Truncate` daher nur in
    Ausnahmefällen und stelle wichtige Inhalte an anderer Stelle vollständig
    dar.

```tsx
import { Truncate } from "@mittwald/flow-react-components";

<Truncate
  title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua."
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua.
</Truncate>
```

---

# Mit Offset

Um zum Beispiel bei Pfaden sowohl den Anfang als auch das Ende sichtbar zu
halten, kann über die Property `offset` festgelegt werden, wie viele Zeichen vom
Ende angezeigt werden sollen. Zusätzlich lässt sich mit `ellipsis` ein
individueller Platzhalter definieren.

```tsx
import { Truncate } from "@mittwald/flow-react-components";

<Truncate offset={9} ellipsis="[...]">
  https://flow.mittwald.de/04-components/lorem/ipsum/dolor/sit/amet/consetetur/sadipscing/elitr/sed/diam/nonumy/eirmod/tempor/invidunt/ut/labore/et/dolore/content/truncate/overview
</Truncate>
```

---

# Kombiniere mit ...

## Text

```tsx
import {
  Text,
  Truncate,
} from "@mittwald/flow-react-components";

<Text>
  <Truncate>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem
    ipsum dolor sit amet. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua.
  </Truncate>
</Text>
```

## Heading

```tsx
import {
  Heading,
  Truncate,
} from "@mittwald/flow-react-components";

<Heading>
  <Truncate>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem
    ipsum dolor sit amet. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua.
  </Truncate>
</Heading>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | - | - |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `offset` | `number` | `8` | the position(from the end) of the ellipsis that shows in text |
| `ellipsis` | `string` | `...` | Ellipsis that is added into the text in case it is truncated |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung von Truncate darauf, dass ...

- abgeschnittener Text keine kritischen Informationen enthalten darf, die zum
  Verständnis oder zur Bedienung notwendig sind.
- der vollständige Inhalt an anderer Stelle zugänglich ist.

## Verwendung

Verwende Truncate, um einzelne Textzeilen verkürzt in platzbeschränkten Layouts darzustellen.