A block-overflowpropriedade trunca o texto e indica que mais conteúdo segue inserindo reticências ou string personalizada após um número de linhas definido pela max-linespropriedade.
A propriedade foi introduzida no Rascunho do Editor da especificação CSS Overflow Module Nível 3. Isso significa que é experimental no momento e considerado um trabalho em andamento. Na verdade, você pode acompanhar a conversa, que inclui comentários sobre como renomear a propriedade por completo.
Sintaxe
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow aceita os seguintes valores:
clip: Não insere um caractere para indicar mais texto a seguir. Em vez disso, o conteúdo é meramente truncado e cortado no último caractere.ellipsis: Exibe reticências (…) no final da última linha. Ele deve ser renderizado como um caractere Unicode (U + 2026), mas pode ser substituído por um equivalente com base no idioma do conteúdo e no modo de escrita do Agente do Usuário em uso.: Exibe o texto personalizado (por exemplo, “Leia mais →”) no final da última linha. A especificação diz que o User-Agent pode substituir a string por reticências se a string for “absurdamente” longa.
Novamente, tudo isso é um trabalho experimental em andamento. Esses valores podem mudar. Ou, mais podem ser adicionados. Por exemplo, tem havido pedidos de reticências “mais inteligentes” que podem ser capazes de fazer mais coisas, como cortar o texto no meio:
One thing led to another and… yada yada yada, that was that.Use line-clamppara breve
Podemos obter quase a mesma coisa usando line-clampque é uma abreviatura para as propriedades block-overflowe max-lines.
Como está definido atualmente, no entanto, line-clampsó aceita um único valor numérico para o valor max-linese define implicitamente block-overflowpara o ellipsisvalor. Então, se você quiser usar uma string customizada para truncamento, você terá que usar a forma longa.
Suporte para navegador
Nenhum no momento, mas você pode obter algum suporte usando a implementação proprietária do WebKit de line-clamp:
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 14 * | 68 * | Não | 17 | 5 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |