Sem mais delongas, vamos começar com o código!
1. Exiba apenas uma linha de texto e depois oculte e omita
// Exibe apenas uma linha de texto e depois omite .element {
width: 300px; /* Precisa definir uma largura fixa */
white-space: nowrap; /* Força a exibição de linha única sem quebra de linha */
overflow: hidden /* Oculta a parte além da caixa */
text-overflow: ellipsis /* Exibe elipses em excesso */
}2. Exiba o número especificado de linhas de texto e, em seguida, oculte-o e omita-o.
// Omitir após exibir text.element multilinha {
width: 300px; /* Precisa definir uma largura fixa */
display: -webkit-box;
-webkit-box-orient: vertical; /* arranjo vertical */
-webkit-line-clamp: 3; /* Exibe três linhas */
overflow: hidden /* Oculta a parte além da caixa */
text-overflow: ellipsis /* Exibe elipses em excesso */
} O texto multilinha é omitido usando display: -webkit-box; layout de caixa flexível e -webkit-line-clamp para obter truncamento de texto multilinha.
Nota: Este método é adequado para navegadores principais do WebKit (como Chrome, Safari, etc.). Para outros navegadores, pode ser necessário suporte adicional para polyfill.
Outras soluções
1. Use JavaScript para calcular dinamicamente a altura do conteúdo do texto e truncá-lo.
2. Use bibliotecas existentes: como: Clamp.js
Clamp.js: uma biblioteca leve para truncamento de texto multilinha entre navegadores.
//Linha única $clamp(myHeader, {clamp: 1});
//Múltiplas linhas $clamp(myHeader, {clamp: 3});
//Calcula automaticamente o número de linhas com base na altura disponível $clamp(myParagraph, {clamp: 'auto'});
//Calcula automaticamente o número de linhas com base na altura fixa $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (solução de compatibilidade parcial)
Para alguns navegadores, embora não haja suporte direto para -webkit-line-clamp , podemos combinar alguns CSS simples para obter um efeito aproximado.
.elemento {
display: bloco /* Exibir como bloco */
overflow: hidden; /* Ocultar conteúdo em excesso */
text-overflow: ellipsis /* Exibe elipses em excesso */
altura da linha: 1,5em; /* Definir altura da linha */
altura máxima: 4,5em; /* Altura máxima de 3 linhas, 3 linhas * 1,5 linhas de altura = 4,5em */
espaço em branco: normal; /* mantém a quebra normal do texto */
}Embora este esquema não consiga obter um truncamento preciso de múltiplas linhas em todos os casos, ele ainda é adequado para suportar a exibição básica de omissão de texto em múltiplas linhas.
Isso conclui este artigo sobre como ocultar e exibir reticências depois que o texto CSS excede o limite e outras soluções de compatibilidade do navegador. Para obter mais informações sobre o texto CSS relacionado que excede o conteúdo oculto, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. espero que você apoie mais o downcodes.com no futuro!