Truncate

<tpg-truncate></tpg-truncate>

Truncate allows you to truncate text in a more controlled manner than regular css truncation. Hovering over the text will display the entire text. Minimum of 8 characters must be visible for the truncation to start

Examples

Component

Truncate:

Position Controlled:

File Extension:

Ignore File Extension:

Vanilla JS

  <tpg-truncate
    label="ThisIsAReallLongStringThatWillTruncate"
  ></tpg-truncate>
  <tpg-truncate
    label="TheEndPositionCanAlsoBeControlled"
    truncate-end="10"
  ></tpg-truncate>
  <tpg-truncate
    label="ItEvenSupportsFileExtensions.png"
  ></tpg-truncate>
  <tpg-truncate
    label="ExtensionsCanAlsoBeIgnored.tiff"
    ignore-extension
  ></tpg-truncate>

React

  <tpg-truncate
    label="ThisIsAReallLongStringThatWillTruncate"
  ></tpg-truncate>
  <tpg-truncate
    label="TheEndPositionCanAlsoBeControlled"
    truncate-end={10}
  ></tpg-truncate>
  <tpg-truncate
    label="ItEvenSupportsFileExtensions.png"
  ></tpg-truncate>
  <tpg-truncate
    label="ExtensionsCanAlsoBeIgnored.tiff"
    ignore-extension
  ></tpg-truncate>

Properties

Attribute	Property	Description	Type	Default Value
label	label	Textual label of the button	string	''
ignore-extension	ignoreExtension	Whether or not to display the extension explicitly	boolean	false
truncate-end	truncateEnd	How many letters the truncate should show	number	3

Events

Event name	Reactjs attribute	Description
No events found.

Sandbo

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	Textual label of the button	string	''
ignore-extension	ignoreExtension	Whether or not to display the extension explicitly	boolean	false
truncate-end	truncateEnd	How many letters the truncate should show	number	3

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox