Truncate
<lynk-truncate> | LynkTruncate
Truncate is a tool used to shorten numeric and non-numeric character strings, typically when the string overflows its container.
The truncate component contains two child shadow elements and their corresponding slots: the default slot
within the truncate__start element and slot="end" within the
truncate__end element. If both start and end are present truncation will occur in the middle of
the string. If only the default slot is used, truncation will occur at the end of the string. If only
slot="end" is present, truncation will occur at the beginning of the string.
This is a really long string that will truncate when it’s contents extend beyond the parent elements
width.
<h1> <lynk-truncate >This is a really long string that will truncate when it's contents extend beyond the parent elements width.</lynk-truncate > </h1>
Examples
Default
<p><lynk-truncate>Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</lynk-truncate></p>
Truncate Middle
<p> <lynk-truncate >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan<span slot="end" >.mp4</span ></lynk-truncate > </p>
Truncate Start
When truncating at the start of a string, you must include the hidden ‎ or
Left-to-right character to prevent punctuation from moving to the start of the string.
<p> <lynk-truncate ><span slot="end" >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎</span ></lynk-truncate > </p>
Truncate Line Clamp
Use the clamp property to truncate multiple lines of text. Line clamp does not support the
truncate middle or truncate start options.
<p> <lynk-truncate clamp="2" >Line clamp @2. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</lynk-truncate > </p> <p> <lynk-truncate clamp="3" >Line clamp @3. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</lynk-truncate > </p> <p> <lynk-truncate clamp="4" >Line clamp @4. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</lynk-truncate > </p> <p> <lynk-truncate clamp="5" >Line clamp @5. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</lynk-truncate > </p>
Expandable Truncate
Use the expandable attribute to add ”…[more]” and ”…[less]” buttons that allow users to expand
and collapse truncated content.
<p> <lynk-truncate expandable clamp="5"> Expandable truncate example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </lynk-truncate> </p> <p> <lynk-truncate expandable> Single line expandable truncate. This is a very long string that will be truncated at the end with an expandable button to show the full content when needed. </lynk-truncate> </p> <p> <lynk-truncate expandable> Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan <span slot="end">.mp4</span> </lynk-truncate > </p> <p> <lynk-truncate expandable> <span slot="end">Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎</span> </lynk-truncate> </p>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component using a bundler:
import '@uplynk/lynk-design/dist/components/truncate/truncate.js';
Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
end
|
Used when adding ellipsis at start or middle of truncated string. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
clamp
|
Optionally clamp string at specified number of lines. |
'2' | '3' | '4' | '5' | undefined
|
- | |
expandable
|
Show expandable more/less buttons when truncated. |
boolean
|
false
|
|
moreText
more-text
|
Text to show for the expand toggle. |
string
|
'[more]'
|
|
lessText
less-text
|
Text to show for the collapse toggle. |
string
|
'[less]'
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Methods
| Name | Description | Arguments |
|---|---|---|
getTextLabel()
|
Returns a plain text label based on the option’s content. | - |
Learn more about methods.