Ellipsis Examples

Adjust the width of your browser to see them in action.

Simple Example

The content of the height-constrained div is simple text

This text is too long to fit in its container and so should display with ellipsis, indicating to the user that there is more to be seen.
Ellipsis.create($('.test-1'), {});

Markup Example

The content of the height-constrained div contains markup.

This text is too long to fit in its container and so should display with ellipsis, indicating to the user that there is more to be seen.
Ellipsis.create($('.test-2'), {textSelectors:['a']});

Breakpoint Example

The content of the height-constrained div contains markup that is hidden or shown according to the viewport width

On small viewports this text is visible: it's too long to fit in its container and so should display with ellipsis (when it displays at all) On large viewports this text is visible: it's too long to fit in its container and so should display with ellipsis (when it displays at all)
Ellipsis.create($('.test-3'), {textSelectors:['a .show-when-small', 'a .show-when-large']});

Mixed Content Pitfall

The eu-ellipsis utility updates a single text-node and will not process elements that include more than one text-node as children.

This can result in strange errors:

A bad example:

The link at the end of this text will always come after any ellipsis, which is weird! Link
Ellipsis.create($('.test-6'));

But knowing this behaviour can be useful:

This text should be followed by an icon - even when the ellipsis show.
Ellipsis.create($('.test-4'));

The same but in a link:

This text should be followed by an icon - even when the ellipsis show.
Ellipsis.create($('.test-5'), {textSelectors:['a']});

Mixed Content Workaround

The eu-ellipsis can be applied to mixed or differing (sibling) elements when they are assigned a common selector and the "multiNode" option is set to true. Note that the multiNode option can only be used with a single text-selector.

This link should not break the ellipsis, as it uses the same common class as the text.
Ellipsis.create($('.test-7'), {multiNode:true, textSelectors:['.several']});