Propriedade CSS block-overflow

A propriedade block-overflow controla o que acontece no ponto em que um contêiner de bloco é truncado na direção de bloco (verticalmente, em modos de escrita horizontais). Em vez de simplesmente cortar o texto, ela permite marcar o ponto de truncamento com reticências (…) ou uma string personalizada, sinalizando ao leitor que há mais conteúdo a seguir.

Ela faz parte do CSS Overflow Module Level 4 e é a contraparte multilinha de text-overflow: enquanto text-overflow: ellipsis trunca uma única linha na direção inline, block-overflow controla o marcador exibido quando o conteúdo é truncado em várias linhas (por exemplo, por max-lines ou line-clamp).

block-overflow só tem efeito em um ponto de truncamento forçado — por exemplo, a última linha visível permitida por max-lines, ou a caixa de linha imediatamente antes de uma quebra de região. Por si só, ele não limita quantas linhas são exibidas; combine-o com max-lines para isso.

Sintaxe

block-overflow: clip | ellipsis | <string>;

O valor é uma única palavra-chave (clip ou ellipsis) ou uma <string> entre aspas.

Truncando múltiplas linhas

block-overflow foi projetado para funcionar em conjunto com max-lines, que limita o número de linhas, e a propriedade continue, que marca a caixa como truncável. O exemplo abaixo limita a descrição de um cartão a três linhas e exibe reticências na terceira:

.card-description {
  max-lines: 3;            /* keep only the first three lines      */
  continue: discard;       /* truncate the rest                    */
  block-overflow: ellipsis; /* show … at the truncation point      */
}

<p class="card-description">
  This description is long enough to wrap onto many lines. Only the
  first three are kept, and the third ends with an ellipsis so the
  reader knows the text continues beyond what is shown here.
</p>

Como nenhum navegador suporta essa combinação ainda, o equivalente prático que funciona em produção é line-clamp:

.card-description {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

Relação com line-clamp

A propriedade line-clamp é uma abreviação que define max-lines, block-overflow e continue de uma só vez. Escrever line-clamp: 3 implica block-overflow: ellipsis e limita o bloco a três linhas, portanto raramente é necessário definir block-overflow diretamente — deixe o line-clamp defini-lo para você.

Valores

Uma string personalizada substitui as reticências padrão. Isso é útil para marcadores de truncamento localizados ou com identidade de marca, como "… read more":

.custom-ellipsis {
  block-overflow: "… read more";
}

block-overflow vs. text-overflow

Essas duas propriedades resolvem problemas relacionados em eixos diferentes e são fáceis de confundir:

Se você precisa de um título de uma linha que termine com reticências, use text-overflow. Se precisa de um trecho multilinha que termine com reticências, use line-clamp hoje (e block-overflow quando os navegadores o suportarem).

Prática