Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Ellipsis CSS

Ellipsis CSS

Also see /react/ellipsis
React component

Basic usage

<div class="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 class="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>
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 class="bf-ellipsis">
  Text that fit within its container will not be cut off.
</div>

<div class="bf-ellipsis">
  Text that fit within its container will not be cut off.
</div>
Text that fit within its container will not be cut off.

Lines

The --bf-ellipsis-lines custom property can be used to allow the ellipsis to be applied after a certain number of lines. (default: 1)

<div class="bf-ellipsis" style="--bf-ellipsis-lines: 3; max-width: 300px">
  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 class="bf-ellipsis" style="--bf-ellipsis-lines: 3; max-width: 300px">
  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>
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.

Padded

The bf-ellipsis-padded class 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.

<div class="bf-ellipsis bf-ellipsis-padded">
  When focusing a <a href="#">link</a> you will get an
  <span class="bf-radius-xs" style="outline: 2px dotted; outline-offset: 2px;">outline</span>
  but the outline will not be clipped by the ellipsis when the padded
  parameter is included.</span>
</div>

<div class="bf-ellipsis bf-ellipsis-padded">
  When focusing a <a href="#">link</a> you will get an
  <span class="bf-radius-xs" style="outline: 2px dotted; outline-offset: 2px;">outline</span>
  but the outline will not be clipped by the ellipsis when the padded
  parameter is included.</span>
</div>
When focusing a link you will get an outline but the outline will not be clipped by the ellipsis when the padded parameter is included.

Avoid: When the bf-ellipsis-padded class is not used, the outline will be clipped by the ellipsis.

<div class="bf-ellipsis">
  When focusing a <a href="#">link</a> you will get an
  <span class="bf-radius-xs" style="outline: 2px dotted; outline-offset: 2px;">outline</span>
  but the outline will not be clipped by the ellipsis when the padded
  parameter is included.</span>
</div>

<div class="bf-ellipsis">
  When focusing a <a href="#">link</a> you will get an
  <span class="bf-radius-xs" style="outline: 2px dotted; outline-offset: 2px;">outline</span>
  but the outline will not be clipped by the ellipsis when the padded
  parameter is included.</span>
</div>
When focusing a link you will get an outline but the outline will not be clipped by the ellipsis when the padded parameter is included.