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>

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>

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>

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{" "}
  <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>

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>

Sandbox

import Ellipsis from "@intility/bifrost-react/Ellipsis";

export default function EllipsisDemo() {
  return (
    <div style={{ maxWidth: 300 }}>
      <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>
      <br />
      <Ellipsis lines={2}>
        This text uses the lines prop to allow up to two lines before the
        ellipsis is applied. It will wrap naturally until the second line is
        full, then cut off the rest.
      </Ellipsis>
    </div>
  );
}