TruncatedText

Use this component to truncate long text by using an ellipsis. When the text is truncated a tooltip displays the full content on hover.

Usage

import { TruncatedText } from '@binarycapsule/ui-capsules';

Demo

View source on GitHub
Lorem ipsum

Knobs 🎛

Notice how a tooltip is shown only when the text is truncated.
<f>
  <KM>
    Lorem ipsum
  </KM>
</f>

Props

NameDescription
children
Required
string
The text to render.