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>
  Text that is so long and wordy that it would overflow its container will be
  cut off and replaced with an ellipsis because it would not otherwise fit.
</Ellipsis>
<Ellipsis>
  Text that is so long and wordy that it would overflow its container will be
  cut off and replaced with an ellipsis because it would not otherwise fit.
</Ellipsis>

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

<Ellipsis>Text that fit within its container will not be cut off.</Ellipsis>
<Ellipsis>Text that fit within its container will not be cut off.</Ellipsis>

Lines

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

<Ellipsis lines={3}>[Wordy text]</Ellipsis>
<Ellipsis lines={3}>[Wordy text]</Ellipsis>

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>
<Grid>
  <Ellipsis>Some text</Ellipsis>
  [more content]
</Grid>

Nope

<Ellipsis>
  <Grid>Don't do this</Grid>
  [more content]
</Ellipsis>
<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{" "}
  <span
    style={{
      outline: "2px dotted",
      outlineOffset: "2px",
      borderRadius: "var(--bf-radius-xs)",
    }}
  >
    outline
  </span>
  , but the outline will not be clipped by the ellipsis when the padded parameter
  is included.
</Ellipsis>
<Ellipsis padded>
  When focusing a <a href="#">link</a> you will get an{" "}
  <span
    style={{
      outline: "2px dotted",
      outlineOffset: "2px",
      borderRadius: "var(--bf-radius-xs)",
    }}
  >
    outline
  </span>
  , 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{" "}
  <span
    style={{
      outline: "2px dotted",
      outlineOffset: "2px",
      borderRadius: "var(--bf-radius-xs)",
    }}
  >
    outline
  </span>
  , but the outline will not be clipped by the ellipsis when the padded parameter
  is included.
</Ellipsis>
<Ellipsis>
  When focusing a <a href="#">link</a> you will get an{" "}
  <span
    style={{
      outline: "2px dotted",
      outlineOffset: "2px",
      borderRadius: "var(--bf-radius-xs)",
    }}
  >
    outline
  </span>
  , but the outline will not be clipped by the ellipsis when the padded parameter
  is included.
</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">
  Text that is so long and wordy that it would overflow its container will be
  cut off and replaced with an ellipsis because it would not otherwise fit.
</div>
<div className="bf-ellipsis">
  Text that is so long and wordy that it would overflow its container will be
  cut off and replaced with an ellipsis because it would not otherwise fit.
</div>