Uma caixa de rolagem HTML é uma caixa que adiciona barras de rolagem ao lado direito e inferior quando o conteúdo da caixa é maior que as dimensões da caixa. Em outras palavras, se você tem uma caixa que pode caber em torno de 50 palavras, e você tem texto de 200 palavras, uma caixa de rolagem HTML irá colocar as barras de rolagem para cima para que você veja as 150 palavras adicionais. No HTML padrão, basta pressionar o texto extra para fora da caixa.
Fazendo rolagem HTML é bastante fácil. Você só precisa definir a largura e a altura do elemento que deseja rolar e, em seguida, usar a propriedade de estouro de CSS para definir como deseja que a rolagem ocorra.
O que fazer com texto extra?
Quando você tem mais texto do que caberá no espaço do layout, você tem algumas opções:
- Reescreva o texto para que fique mais curto e se encaixe.
- Permita que o texto flua além dos limites e espere que o layout possa ser flexível para suportá-lo.
- Cortar o texto onde ele transborda.
- Adicione barras de rolagem (geralmente verticais para texto) para que o espaço role para mostrar o texto extra.
A melhor opção é normalmente a última opção: crie uma caixa de texto de rolagem. Em seguida, o texto extra ainda pode ser lido, mas seu design não é comprometido.
HTML e CSS para isso seria:
o
estouro: auto;
informa ao navegador para adicionar barras de rolagem se elas forem necessárias para impedir que o texto transborde os limites da div. Mas para que isso funcione, você também precisa das propriedades de estilo width e height definidas no div, para que haja limites para o estouro.
Você também pode cortar o texto alterando o estouro: auto; to overflow: hidden ;. Se você deixar de fora a propriedade de estouro, o texto transbordará sobre os limites da div.
Você pode adicionar barras de rolagem para mais do que apenas texto
Se você tiver uma imagem grande que gostaria de exibir em um espaço menor, poderá adicionar barras de rolagem ao redor da mesma maneira que faria com o texto.
Neste exemplo, a imagem 400x509 está dentro de um parágrafo 300x300. Tabelas longas de informação podem ficar muito difíceis de ler muito rapidamente, mas colocando-as dentro de um div de tamanho limitado e adicionando a propriedade overflow, você pode gerar tabelas com muitos dados que não ocupam espaço extremo em sua página . A maneira mais fácil é como com imagens e texto, basta adicionar um div ao redor da tabela, definir a largura e a altura desse div e adicionar a propriedade de overflow: Uma coisa que acontece quando você faz isso é uma barra de rolagem horizontal geralmente aparece porque o navegador pressupõe que o cromo das barras de rolagem está sobrepondo a tabela. Há muitas maneiras de corrigir isso, alterando a largura da tabela e outras. Mas o meu favorito é simplesmente desativar a rolagem horizontal com a propriedade CSS 3 estouro-x . Basta adicionar overflow-x: oculto; para o div, e isso irá remover a barra de rolagem horizontal. Certifique-se de testar isso, pois pode haver conteúdo que desapareça.
Tabelas podem se beneficiar das barras de rolagem
Nome telefone Jennifer 502-5366
