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.
<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.
https://flow.mittwald.de/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
Kombiniere Truncate mit Text, um langen Fließtext einzeilig zu kürzen.
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
Kombiniere Truncate mit Heading, um lange Überschriften zu kürzen.
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.
Properties
| Property | Type | Description |
|---|---|---|
children | ReactNode | |
className | string | The elements class name. |
ellipsis | stringdefault: '...' | String inserted where characters were removed, if the text is truncated. |
offset | numberdefault: 8 | Number of characters kept at the end of the text, i.e. the position of the ellipsis counted from the end. |
title | string | The `title` attribute of the elements root, which browsers show as a native tooltip on hover. It is not derived from the children — pass the full text to make it readable while truncated. |