Quebra de texto CSS

O que é

Em card de notícia, lista de produtos ou tabela, o texto quase nunca tem o tamanho certo: um título é curto, o outro ocupa quatro linhas e a grade fica toda desalinhada. Estas classes resolvem isso: truncate corta numa linha com reticências, clamp-2 (ou 1, 3, 4) para exatamente naquela linha, twr-b deixa as linhas de um título com tamanhos parecidos, twr-p evita uma palavra sozinha na última linha, e wordb-* quebra palavras gigantes (e-mail, link, código de rastreio) que estouram a caixa.

É só CSS. O corte é visual: o texto inteiro continua no HTML, então o Google e o leitor de tela leem tudo. O corte só acontece quando a caixa tem largura limitada (dentro de um card, de uma coluna da grade, de uma célula de tabela).

Quando usar

• Nome de produto ou e-mail numa linha só (lista, tabela, menu): truncate.
• Resumo de card que precisa terminar na mesma altura em todos os cards: clamp-2 ou clamp-3.
• Título grande (topo de página, chamada): twr-b — as linhas ficam equilibradas.
• Parágrafo em que sobra uma palavra solitária na última linha: twr-p.
• Link, e-mail ou código comprido que vaza da caixa no celular: wordb-bw.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Ponha a classe no texto. Aqui o resumo para na 2ª linha, com reticências.

   Site profissional para pequenas empresas, com loja virtual, agenda on-line e botão de WhatsApp em todas as páginas.

   <p class="clamp-2">Site profissional para pequenas empresas, com loja virtual, agenda on-line e botão de WhatsApp em todas as páginas.</p>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<article sw-card>
  <img src="/noticia.jpg" alt="" class="w-fl blk">
  <div class="sw-card-bdy">
    <h4 class="twr-b clamp-2 mt-0">Título da notícia</h4>
    <p class="clamp-3 m-0 t-mut t-p">Resumo da notícia…</p>
  </div>
</article>

<div class="flx alc gap-3 p-p">
  <strong class="truncate">Maria Aparecida dos Santos Oliveira</strong>
  <span class="truncate t-mut t-p">maria.aparecida.oliveira@exemplo.com.br</span>
</div>

<h1 class="twr-b">Sistema de agendamento para salão de beleza, com lembrete automático no WhatsApp</h1>

<p class="t-mut t-p">Seu código de rastreio:</p>
<p class="wordb-ba fw6">BR1234567890123456789XYZBR</p>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• Não coloque padding no mesmo elemento do clamp-*: a linha seguinte aparece pela metade embaixo. Ponha o padding no pai (como o sw-card-bdy da receita) e o clamp-* no texto.
• truncate num <span> solto no meio do texto não corta: o corte só funciona em bloco (<p>, <div>, <strong class="blk">) ou em item de uma linha flx, como na receita da lista.
• truncate e clamp-* só cortam se a caixa tiver largura limitada. Num texto solto na página inteira, pode não haver o que cortar.
• O corte é só visual: não use para "esconder" informação. O texto inteiro continua no HTML e aparece se a pessoa copiar ou usar leitor de tela.
• Não use wordb-ba em texto normal: ele quebra qualquer palavra no meio ("pala-vra"). Para texto normal com um link comprido, use wordb-bw.

O que ele não faz

• twr-b funciona em textos curtos (até umas 6 linhas); em parágrafo longo o navegador ignora. Em navegador antigo, o texto só quebra do jeito normal — nada estraga.
• O clamp-* vai até 4 linhas. Para mais, não há classe pronta.