Middle Truncation
StableUma 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-truncationPreview
Basic
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
Fits
All states
Basic
src/components/application/middle-truncation/middle-truncation.tsxFixed 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
Fits
button.tsxUsage
Props
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