Familiarize-se com uma técnica CSS prática que você pode usar para ocultar o conteúdo e revelá-lo sob demanda.
Limitar a quantidade de texto em um elemento é um requisito comum de web design. Muitas vezes você verá um artigo com um trecho de três ou quatro linhas com um botão que permite expandir o texto completo.
Você pode criar esse design usando uma combinação de CSS e JavaScript. Mas você também pode fazer isso usando CSS sozinho. Descubra duas maneiras de limitar o texto em uma caixa e como você pode criar um botão de expansão dinâmico usando apenas CSS.
A Técnica do Webkit
Crie uma pasta vazia e edite dois arquivos dentro dela: index.html e estilo.css. Dentro de index.html arquivo, crie um esqueleto HTML:
html>
<htmlidioma="en"><cabeça>
<título>Documentotítulo>
<linkrele="folha de estilo"href="estilo.css">
cabeça><corpo>
corpo>
html>
Um link no seção, para o estilo.css arquivo, garante que qualquer CSS adicionado a esse arquivo será aplicado a esta página. Em seguida, cole a seguinte marcação HTML dentro do tags em index.html:
<seçãoaula="grupo de cartas">
<artigoaula="cartão">
<h2>Artigo 1h2><paula="texto de corte">
Texto de 300 palavras vai aqui
p><entradatipo="caixa de seleção"aula="expandir-btn">
artigo><artigoaula="cartão">
<h2>Artigo 2h2><paula="texto de corte">
Texto de 200 palavras vai aqui
p><entradatipo="caixa de seleção"aula="expandir-btn">
artigo><artigoaula="cartão">
<h2>Artigo 1h2><paula="texto de corte">
O texto de 100 palavras vai aqui
p>
<entradatipo="caixa de seleção"aula="expandir-btn">
artigo>
seção>
A estrutura deste HTML é simples, mas ainda usa marcação semântica para acessibilidade. Um elemento de seção contém três elementos de artigo. Cada artigo compreende um título, um parágrafo e um elemento de entrada. Você usará CSS para estilizar cada seção do artigo em um cartão.
Enquanto isso, sua página ficará assim:
Na imagem acima, você pode ver vários comprimentos de texto em cada parágrafo. 300 palavras no primeiro, 200 palavras no segundo e 100 no terceiro.
A próxima etapa é começar a estilizar a página adicionando CSS ao estilo.css arquivo. Comece redefinindo a borda do documento e dando ao corpo uma cor de fundo branca:
*, *::antes, *::depois {
dimensionamento de caixa: caixa de borda;
}
corpo {
fundo: #f3f3f3;
transbordar: escondido;
}
Em seguida, transforme o elemento com a classe card-group em um contêiner de grade com três colunas. Cada seção do artigo ocupa uma coluna:
.card-group {
mostrar: grade;
grade-modelo-colunas: repita(3, 1fr);
brecha: .5rem;
itens de alinhamento: início flexível;
}Estilize cada seção do artigo como um cartão com fundo branco e uma borda preta ligeiramente arredondada:
.cartão {
fundo: branco;
preenchimento: 1rem;
fronteira: 1pxsólidopreto;
raio da borda: 0,25em;
}Finalmente, adicione algumas margens:
h2, p {
margem: 0;
}
h2 {
margem inferior: 1rem;
}
Salve o arquivo e verifique seu navegador. A página deve se parecer com a página mostrada na imagem abaixo:
O próximo passo é cortar o número de linhas para cada texto para 3. Aqui está o CSS para isso:
.cuttoff-text {
--max-lines: 3;
transbordar: escondido;
mostrar: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--max-lines);
}
Comece definindo uma variável CSS, max-lines, para 3 e ocultando o conteúdo transbordante. Em seguida, defina o visor para -webkit-box e prenda a linha a 3.
A imagem a seguir mostra o resultado. Cada cartão exibe uma elipse na terceira linha de texto:
Essa técnica pode ser bastante complicada de executar. Se você omitir qualquer propriedade, tudo vai quebrar. Outra desvantagem é que você não pode usar uma propriedade de exibição diferente de --webkit-box. Por exemplo, você pode querer use Grid ou Flexbox. Por esses motivos, a técnica a seguir é melhor.
Uma abordagem mais flexível para limitar o número de linhas no texto
Essa técnica permite que você faça a mesma coisa que a abordagem do webkit, com os mesmos resultados. Mas a grande diferença é que você tem muita flexibilidade porque você mesmo define a altura. Além disso, você pode usar qualquer propriedade de exibição ou qualquer opção de estilo de sua preferência.
Para começar, substitua o bloco CSS por .cutoff-text com isso:
.cuttoff-text {
--max-lines: 5;
--altura da linha: 1.4;
altura: calcular(var(--max-lines) * 1em * var(--altura da linha));
altura da linha: var(--altura da linha);
posição: relativo;
}Definir uma altura de linha é importante porque você precisa levar isso em consideração ao determinar sua altura. Para obter a altura, multiplique a altura da linha pelo tamanho da fonte e pelo número de linhas.
Nós adicionamos posição: relativa porque precisamos dela para adicionar o efeito fade. Adicione o seguinte CSS para completar o efeito:
.cuttoff-text::antes {
contente: "";
posição: absoluto;
altura: calcular(2em * var(--altura da linha));
largura: 100%;
fundo: 0;
eventos de ponteiro: nenhum;
fundo: Gradiente linear(parafundo, transparente, branco);
}O CSS acima desfoca a última linha de texto em cada cartão. Você pode obter um efeito de desvanecimento usando o fundo propriedade e um gradiente. Você deve definir eventos de ponteiro para nenhum para garantir que o elemento não seja selecionável.
Aqui está o resultado:
Essa técnica obteve o mesmo resultado da anterior (mais o desfoque no final). Mas você obtém mais flexibilidade para usar outros tipos de layouts e designs.
Adicionando um botão de expandir e recolher dinâmico
Adicionar um botão de expansão/recolhimento torna os cartões mais realistas e interativos. Com esse padrão, você expande o conteúdo clicando no botão Expandir botão, após o qual o texto muda para Colapso. Portanto, o texto do botão alterna entre "Expandir" e "Recolher" conforme você clica nele. Além disso, o restante do conteúdo é exibido e ocultado em cada estado respectivo.
Você já definiu um entrada elemento em seu HTML. Este elemento servirá como seu botão. Para estilizar esta entrada em um botão, inclua o seguinte CSS em sua folha de estilo:
.expand-btn {
aparência: nenhum;
fronteira: 1pxsólidopreto;
preenchimento: 0,5em;
raio da borda: 0,25em;
cursor: ponteiro;
margem superior: 1rem;
}Ao passar o mouse sobre o botão, você deseja alterar a cor de fundo:
.expand-btn:flutuar {
cor de fundo: #ccc;
}Agora o CSS para mudar o texto quando a entrada é verificada:
.expand-btn::antes {
contente: "Expandir"
}
.expand-btn:verificado::antes {
contente: "Colapso"
}
Agora, quando você clicar no botão/entrada, o texto vai de Expandir para Colapso. Mas o conteúdo em si ainda não se expandirá. Para fazer isso quando você clicar no botão, adicione o seguinte CSS:
.cuttoff-text:tem(+.expand-btn:verificado) {
altura: auto;
}Este exemplo usa o método has() Seletor de CSS para direcionar o elemento. Com este código, você está dizendo que se a área de texto de corte tiver um botão de expansão marcado, a altura do cartão deve ser auto (que o expande).
Aqui está o resultado:
Outras dicas e truques de CSS para aprender
Este artigo demonstrou dois métodos diferentes para limitar o número de linhas em uma caixa usando CSS. Até adicionamos um botão para expandir/recolher o conteúdo sem escrever uma única linha de JavaScript.
Mas existem muitas outras dicas e truques em CSS. Essas dicas oferecem uma maneira criativa de obter os layouts desejados sem prejudicar o desempenho, a legibilidade ou a acessibilidade.
