ips.ui.truncate

Description

The truncate widget is used to make previews or short versions of blocks of text. It supports removing the extra text entirely, or hiding it behind a 'read more' button. It also works on blocks of rich text containing other media in HTML.

Usage

The widget attribute data-ipsTruncate should be added to an element which wraps the content to be truncated. e.g:

<div data-ipsTruncate>
  <p>Many lines of rich content...</p>
</div>

Options

type
(String; optional; default 'remove')

Specifies how the truncating is done. remove removes the excess text entirely. hide leaves the excess text on the page, hiding it behind a 'read more' button.

size
(Mixed; optional; default 100)

Specifies the height the element should be; the excess text is truncated. Three types of value are accepted:

• Selector, e.g. #someElementID
  When a selector is provided, the height of the widget element will be set to the outerHeight of the first element that matches the selector.
• Lines value, e.g. 3 lines
  Text can be truncated to a certain number of lines of text, taking into account current formatting applied to the text (Note: lines is always plural).
• Number e.g. 100
  A simple number value can be provided, which will truncate the text to that number of pixels.

expandText
(String; optional; default 'Read more')

If type is hide, this option can be used to change the text shown on the button which will show the hidden content.

Events emitted by ips.ui.truncate

Events are emitted on the element on which the data-ipsTruncate attribute is assigned.

contentTruncated

Emitted when the content in the element has been truncated.

Event data:

• type
  The type of truncating used, either remove or hide.

contentExpanded

Emitted when the user expands the text in a widget where type is hide.