Display

TruncateText

One line cut to a number of characters, with the full text in a tooltip — for long links, ids and names where space is short.

Features7

API

Theming

Basic

Text longer than limit is cut and gets ...; the full text shows in a tooltip on hover or focus and stays open while you hover it. Shorter text stays as it is. ellipsis changes the mark.

Quarterly marketing report for the spring campaign

Short title

9f2c41d7-6b0e-4c55-9a43-0d2e7b8c1f60

5 lines

<div class="rows">  <tx-truncate-text text="Quarterly marketing report for the spring campaign" [limit]="24" />  <tx-truncate-text text="Short title" [limit]="24" />  <tx-truncate-text text="9f2c41d7-6b0e-4c55-9a43-0d2e7b8c1f60" [limit]="8" ellipsis="…" /></div>

Table

In a table cell it keeps long values on one line, so rows stay the same height.


/spring-sale	https://example.com/campaigns/spring-sale-2026?utm_source=newsletter
/old-pricing-page-with-a-long-path	https://example.com/pricing
/help	https://help.example.com/articles/getting-started-with-your-workspace

8 lines

<tx-table ariaLabel="Redirects" dataKey="id" [value]="rows" [columns]="columns">  <ng-template txTableCell="from" let-value="value">    <tx-truncate-text [text]="value" [limit]="22" />  </ng-template>  <ng-template txTableCell="to" let-value="value">    <tx-truncate-text [text]="value" [limit]="32" openLink />  </ng-template></tx-table>

Link

href makes the text a link; openLink links a URL to itself. Links open in a new tab unless target says otherwise.

news.example.org

https://example.com/blog/how-we-rebuilt-our-onboarding-in-two-weeks

8 lines

<div class="rows">  <tx-truncate-text text="news.example.org" href="https://news.example.org" [limit]="30" />  <tx-truncate-text    text="https://example.com/blog/how-we-rebuilt-our-onboarding-in-two-weeks"    [limit]="34"    openLink  /></div>

Copy

copyable puts a copy button before the text; it copies the full text, not the cut one, and copied reports it.

sk_test_51Hc8f2LkA9xQm3Vt7Rz0pWnYbEuJd

Nothing copied yet

7 lines

<tx-truncate-text  text="sk_test_51Hc8f2LkA9xQm3Vt7Rz0pWnYbEuJd"  [limit]="14"  copyable  (copied)="last.set($event)"/><p class="result">{{ last() ? 'Copied: ' + last() : 'Nothing copied yet' }}</p>

Highlight

highlight marks search matches in the shown part of the text.

shop.example.com

summer-collection.shop.example.org

blog.example.net

my-long-workshop-landing.example.com

12 lines

<input  txInput  aria-label="Search domains"  placeholder="Search"  [value]="search()"  (input)="search.set($any($event.target).value)"/><div class="rows">  @for (domain of domains; track domain) {    <tx-truncate-text [text]="domain" [limit]="26" [highlight]="search()" />  }</div>

Design tokens

dt changes the tokens of one instance — here a wider gap and other link colours.

https://example.com/reports/2026/annual-summary

13 lines

<tx-truncate-text  text="https://example.com/reports/2026/annual-summary"  [limit]="28"  openLink  copyable  [dt]="{    root: {      gap: '12px',      linkColor: 'var(--tx-text-primary)',      linkHoverColor: 'var(--tx-primary-soft-text)',    },  }"/>

Pass through

pt adds classes and styles to the parts: root, text, link, copy.

9f2c41d7-6b0e-4c55-9a43-0d2e7b8c1f60