Ellipsis

Basic usage

Text that is is too long to fit within its container will be cut off and replaced with an ellipsis.

A tooltip will show the full text on hover.

<Ellipsis>Wordy text</Ellipsis>

When the text fits within its container, it will not be cut off, and no tooltip will be rendered.

Lines

The lines prop can be used to allow the ellipsis to be applied after a certain number of lines.

<Ellipsis lines={3}>

Use as innermost element

Nesting non-text elements inside the Ellipsis component may cause unexpected behavior, so we recommend only using it as the innermost element.

Yep

<Grid>
  <Ellipsis>Some text</Ellipsis>
  [more content]
</Grid>

Nope

<Ellipsis>
  <Grid>Don't do this</Grid>
  [more content]
</Ellipsis>

Of course, text-formatting elements like <strong> and <em> is fine, and <Icon /> should also not cause issues.

Padded

The padded prop can be used to avoid clipping focus styling on contained elements by adding 3px of padding and -3px of margin to the ellipsis root element.

This is only needed if you expect the text to contain links.

Yep

<Ellipsis padded>
  When focusing a <a href="#">link</a> you will get an outline, but the outline
  will not be clipped by the ellipsis when the padded parameter is included.
</Ellipsis>

Nope

<Ellipsis>
  When focusing a <a href="#">link</a> you will get an outline, but the outline
  will be clipped by the ellipsis when the padded parameter is omitted.
</Ellipsis>

Disable tooltip

If you don't want a tooltip (it's interfering with other functionality and you're supplying your own?), you can use the .bf-ellipsis CSS class directly instead:

<div className="bf-ellipsis">Wordy text</div>