Este artigo demonstra o método para impedir que o conteúdo transborde e habilitar a rolagem usando CSS.
Como parar o estouro de conteúdo e habilitar a rolagem?
O objetivo de impedir que o conteúdo transborde é que o conteúdo caiba em seu contêiner e não afete negativamente o desempenho do site. Ele pode entender facilmente o contexto e pode melhorar a acessibilidade para o usuário final. Para uma explicação detalhada, vamos discutir através de um exemplo:
Etapa 1: ativar a rolagem com estouro de conteúdo
Inicialmente, comece criando uma tabela dentro do arquivo HTML na qual o efeito de rolagem será aplicado. Vamos supor que a tabela já foi criada e consiste em seis linhas e sete colunas, e alguns dados fictícios são fornecidos à tabela:
< mesa >
< tr >
< º > Cabeça 1 < / º >
< º > Cabeça 2 < / º >
< º > Cabeça 3 < / º >
< º > Cabeça 4 < / º >
< º > Cabeça 5 < / º >
< º > Cabeça 6 < / º >
< º > Cabeça 7 < / º >
< / tr >
< tr >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< td > Linha 1 < / td >
< / tr >
< tr >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< td > Linha 2 < / td >
< / tr >
< tr >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< td > Linha 3 < / td >
< / tr >
< tr >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< td > Linha 4 < / td >
< / tr >< tr >
< td > linha 5 < / td >
< td > linha 5 < / td >
< td > linha 5 < / td >
< td > linha 5 < / td >
< td > linha 5 < / td >
< td > linha 5 < / td >
< td > linha 5 < / td >
< / tr >
< tr >
< td > linha 6 < / td >
< td > linha 6 < / td >
< td > linha 6 < / td >
< td > linha 6 < / td >
< td > linha 6 < / td >
< td > linha 6 < / td >
< td > linha 6 < / td >
< / tr >
< / mesa >
Após a execução do trecho de código acima, a página da Web aparece assim:
A saída exibe que os dados da tabela estão em um formato menos legível e muito espaço foi adquirido pela tabela.
Etapa 2: Configurando o estouro e o efeito de rolagem No trecho de código acima: Após a execução do trecho de código acima, a página da Web aparece assim: A página da Web mostra que a tabela agora está consumindo menos espaço e impedindo que o conteúdo transborde. Além disso, o efeito de rolagem foi ativado. Observação : Definindo ' estouro: automático ' ou ' estouro: rolagem ”, os usuários podem habilitar a rolagem para conteúdo transbordante. Além disso, o “ estouro: oculto ” pode ser usado para evitar o estouro completamente. As propriedades “overflow-x” e “overflow-y” são utilizadas para controlar o estouro e permitir a rolagem nos eixos horizontal e vertical. Ele evita que o conteúdo transborde e permite a rolagem para criar um design responsivo interativo para todos os dispositivos. Este artigo demonstrou como impedir que o conteúdo transborde e habilitar a rolagem usando CSS.
Depois disso, envolva a tabela com um pai “
.transbordar {
largura : 200px ;
altura : 200px ;
estouro-x : auto ;
estouro-y : auto ;
comportamento de rolagem : suave ;
}
Conclusão