Ellipsis
Hide overflowing text with an ellipsis
Ellipsis
Go to top
Basic usage
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.
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)
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.
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.
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.