SWCore / CSS / Quebra de texto

Quebra de texto CSS

Truncar numa linha, parar numa linha exata, título sem palavra órfã — sem JS nenhum.

O que é

Controle fino de quebra de linha e truncamento de texto, incluindo o recurso moderno de "linhas equilibradas" (evita título torto com 1 palavra sozinha na última linha).

Como funciona

São só classes CSS, sem JS. truncate usa text-overflow: ellipsis com white-space: nowrap; clamp-N usa -webkit-line-clamp (por isso o padding precisa ir no elemento pai, não no texto truncado). twr-b e twr-p são as propriedades nativas text-wrap: balance e text-wrap: pretty — o navegador decide onde quebrar a linha sozinho.

Exemplos

Truncar numa linha (.truncate) Ao vivo

Este texto é bem longo e corta numa linha só, com reticências no fim quando não cabe.

A caixa tem largura limitada — redimensione a janela e veja o corte acompanhar.

<p class="truncate">corta numa linha só, com reticências…</p>

<!-- só funciona com largura limitada: sem isso, não há o que cortar -->

Parar numa linha exata (.clamp-N) Ao vivo

Primeiro parágrafo de exemplo que continua e continua, mas para na primeira linha.

clamp-1

Segundo parágrafo de exemplo que continua e continua, mas para exatamente na segunda linha, sem cortar palavra pela metade.

clamp-2

Terceiro parágrafo de exemplo que continua e continua e continua, mas para na terceira linha, o que costuma ser o ideal pra resumo de card de notícia.

clamp-3

Quarto parágrafo de exemplo que segue por bastante tempo, com bastante conteúdo, mas para na quarta linha exatamente, mantendo todos os cards do mesmo tamanho.

clamp-4

<p class="clamp-2">para exatamente na 2ª linha…</p>
<p class="clamp-3">para na 3ª — o mais usado em card de notícia</p>

<!-- ATENÇÃO: o padding vai no elemento PAI, nunca no texto truncado.
     Padding no próprio .clamp-* corta a última linha pela metade. -->
<div class="bg-sur p-m">
  <p class="clamp-3">…</p>
</div>

Título sem palavra órfã (.twr-b e .twr-p) Ao vivo

Um título comum que pode terminar com uma palavra sozinha

sem classe

Um título comum que pode terminar com uma palavra sozinha

twr-b — linhas equilibradas

<h3 class="twr-b">título com linhas visualmente equilibradas</h3>
<p class="twr-p">parágrafo sem palavra órfã sozinha na última linha</p>

<!-- são as propriedades nativas text-wrap: balance / pretty.
     O navegador decide onde quebrar — você não controla ponto a ponto. -->

Palavra gigante sem espaço (.wordb-*) Ao vivo

pedidoNumeroDeReferenciaMuitoComprido2026

sem classe — vaza

pedidoNumeroDeReferenciaMuitoComprido2026

wordb-bw

pedidoNumeroDeReferenciaMuitoComprido2026

wordb-ba

<!-- quebra SÓ a palavra gigante, preservando o resto do texto -->
<p class="wordb-bw">pedidoNumeroDeReferenciaMuitoComprido2026</p>

<!-- quebra em qualquer ponto, sempre -->
<p class="wordb-ba">identificador-sem-espaco</p>

<!-- típico de e-mail, URL, código de rastreio e ID em tabela -->

Card de notícia — o uso combinado Ao vivo

Título da matéria que pode ser longo e precisa parar em duas linhas

Resumo da matéria que continua por várias linhas e precisa parar num ponto certo pra todos os cards ficarem do mesmo tamanho na grade.

Um título curto

Resumo curto.

Outro título, desta vez com bastante texto pra transbordar

Resumo de tamanho médio que também é cortado na terceira linha, mantendo o alinhamento da grade.

<div class="bg-sur bd r-m p-m">
  <h4 class="twr-b clamp-2">título equilibrado, máximo 2 linhas</h4>
  <p class="clamp-3">resumo que para na 3ª linha</p>
</div>

<!-- é o que faz todos os cards da grade terminarem na mesma altura -->

Atributos

Nenhum.

Variantes

truncate

corta numa linha só, com reticências

clamp-1 · clamp-2 · clamp-3 · clamp-4

para exatamente na N-ésima linha (padding vai no elemento PAI)

twr-b

título com linhas visualmente equilibradas (text-wrap: balance)

twr-p

parágrafo sem palavra órfã sozinha na última linha (text-wrap: pretty)

wordb-ba

quebra em qualquer ponto (break-all) — identificador comprido sem espaço

wordb-bw

quebra só a palavra gigante sem espaço, preserva o resto (break-word)

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

O .clamp-N corta visualmente, mas o texto continua inteiro no HTML — buscador e leitor de tela leem tudo. Isso é bom pra SEO, mas não use como "esconder informação".
O text-wrap: balance (.twr-b) é pensado pra títulos curtos: em parágrafo longo o navegador ignora por questão de desempenho.

← AnteriorPosição Próximo →Zoom