Componentdata-display

Middle Truncation

Stable

Uma linha de texto encurtada no meio, preservando o começo e o fim — as partes que distinguem dois nomes de arquivo, dois hashes ou dois caminhos. Mede com a fonte computada do próprio elemento e recalcula quando a largura muda; `end` fixa quantos caracteres ficam no fim, `minEnd` garante um mínimo. O texto completo é lido por leitor de tela e aparece no `title`.

Instalação

npx up-web-ds add middle-truncation

Preview

Basic

src/components/application/middle-truncation/middle-truncation.tsx

Fixed End

  • relatorio-anual-de-acessibilidade-2026-versao-final.pdf
  • captura-de-tela-catalogo-dark-mode-mobile-375px.png
  • registry-manifest-com-capabilities-e-support-modules.json

Min End

Digest 1
sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
Digest 2
sha256:60303ae22b998861bce3b28f33eec1be758a213c86c93c076dbe9f558c11c752
Digest 3
sha256:fd61a03af4f77d870fc21e05e7e80678095c92d808cfb3b5c279ee04c74aca13

Resizable

~/projetos/up-web-studio/design-system/registry/foundation/theme.css

Fits

button.tsx

All states

Basic

src/components/application/middle-truncation/middle-truncation.tsx

Fixed End

  • relatorio-anual-de-acessibilidade-2026-versao-final.pdf
  • captura-de-tela-catalogo-dark-mode-mobile-375px.png
  • registry-manifest-com-capabilities-e-support-modules.json

Min End

Digest 1
sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
Digest 2
sha256:60303ae22b998861bce3b28f33eec1be758a213c86c93c076dbe9f558c11c752
Digest 3
sha256:fd61a03af4f77d870fc21e05e7e80678095c92d808cfb3b5c279ee04c74aca13

Resizable

~/projetos/up-web-studio/design-system/registry/foundation/theme.css

Fits

button.tsx

Usage

@/components/middle-truncation
import { MiddleTruncation } from '@/components/middle-truncation'
Middle Truncation
<MiddleTruncation className="w-56">
  src/components/application/middle-truncation/middle-truncation.tsx
</MiddleTruncation>

Props

Props de MiddleTruncation
PropTypeDefaultDescription
children, obrigatóriastringsem valor padrãoThe text to truncate. Read in full by assistive technology.
ellipsisstring"…"String shown in place of the removed middle.
endnumbersem valor padrãoFixed number of characters always kept at the end. Cannot be combined with `minEnd`.
minEndnumbersem valor padrãoWhen splitting evenly, keep at least this many characters at the end. Cannot be combined with `end`.

Estende Omit< React.ComponentProps<'span'>, 'children' > & MiddleTruncationEnd. Aceita também os atributos padrão de um elemento React (279 não listados).

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em tests/e2e/middle-truncation.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o item é texto, não entra na sequência de Tab e não tem estado. Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: o upstream renderizava só o texto encurtado e deixava o original no title, que o toque nunca mostra e que a maioria dos leitores ignora num span genérico; agora o texto encurtado é aria-hidden e o original é exposto uma vez em sr-only. A divisão percorre code points, então emoji e caracteres fora do plano básico não são partidos ao meio, e `end={0}` — ou uma largura em que a divisão não deixa nada para o fim — não anexa mais o texto inteiro depois da reticência (slice(-0)). Sem canvas 2D o texto fica inteiro e o truncate do CSS o encerra, em vez de lançar erro. Medido em navegador com a fonte real: a linha encurtada cabe na caixa sem que o truncate do CSS precise cortá-la de novo, `end` mantém a extensão e `minEnd` o fim do digest, e a linha é recalculada quando a caixa muda de largura. Touch verificado em 320px: toda linha continua cabendo; o texto completo fica disponível ao leitor de tela, e o title é só um complemento para ponteiro. Reduced motion verificado em navegador: não há animação nenhuma no item.

Classificação

Layer
Component
Domínio
Application
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
ncdai registry / middle-truncation
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda