Truncate

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>

Best Practices

• Kürze keine kritischen Informationen ab, die zum Verständnis oder zur Bedienung nötig sind.
• Mach den vollständigen Inhalt an anderer Stelle zugänglich.

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.

Kombiniere mit ...

Text

Kombiniere Truncate mit Text, um langen Fließtext einzeilig zu kürzen.

Heading

Kombiniere Truncate mit Heading, um lange Überschriften zu kürzen.

Properties