Truncate

Die Truncate-Komponente dient dazu, Text einzeilig darzustellen und bei Überlänge mit "..." abzuschneiden.GitHub

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Playground

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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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 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.

https://mittwald.github.io/flow/04-components/lorem/ipsum/dolor/sit/amet/consetetur/sadipscing/elitr/sed/diam/nonumy/eirmod/tempor/invidunt/ut/labore/et/dolore/content/truncate/overview

Kombiniere mit ...

Text

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.

Heading