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.
Report Guide