---
title: Migrate Truncate from Polaris React
description: Learn how to migrate Polaris React Truncate to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/truncate
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/truncate.md
api_name: app-home
---

# Migrate Truncate from Polaris React

Use app-owned text-overflow CSS only when space is genuinely constrained, and keep the full value available accessibly. Don't truncate instructions or unique action labels.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `Truncate` | App-owned text-overflow CSS, with full content available accessibly | Native CSS |

***

## Map truncation behavior

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| Single-line `children` | Narrowly scoped ellipsis CSS | Apply overflow behavior only at the layout boundary that requires it. |
| Heading or paragraph truncation | `lineClamp` where supported | Test long words, translations, and browser zoom. |
| Full value on hover only | Visible detail or another accessible path | A tooltip alone doesn't make essential truncated content reliably available. |

***

## Migrate the call site

1. Document the layout constraint that caused `Truncate` to be used.

2. Apply narrowly scoped app-owned CSS to the element responsible for that behavior.

3. Test responsive layout, zoom, overflow, and keyboard focus.

4. After verification, remove the `Truncate` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* Readable full content and visible keyboard focus.
* Behavior at narrow widths, high zoom, and long translated content.
* Containment so the rule doesn't change unrelated surfaces.

***

## Test and remove Polaris React

Test the migrated `Truncate` behavior at narrow widths, 200% zoom, and with long translated content. Verify full content remains available and keyboard focus remains visible.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating Truncate

##### Polaris web components

```tsx
export function TruncateMigrationExample() {
  const title = 'Long product title that may not fit in the available space';

  return (
    <span
      title={title}
      style={{
        display: 'block',
        maxInlineSize: '16rem',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}
    >
      <s-text>{title}</s-text>
    </span>
  );
}
```

##### Polaris React

```tsx
import {Truncate} from '@shopify/polaris';


export function TruncateMigrationExample() {

  return (
    <Truncate>Long product title that may not fit in the available space</Truncate>
  );
}
```

***