Crie uma caixa com texto de rolagem usando CSS e HTML

A HTML caixa de rolagem é uma caixa que adiciona barras de rolagem no lado direito e na parte inferior quando o conteúdo da caixa é maior do que as dimensões da caixa. Em outras palavras, se você tiver uma caixa que pode conter cerca de 50 palavras e tiver texto de 200 palavras, uma caixa de rolagem HTML colocará barras de rolagem para permitir que você veja as 150 palavras adicionais. No HTML padrão, isso simplesmente empurraria o texto extra para fora da caixa.

Fazer a rolagem HTML é bastante fácil. Você só precisa definir a largura e altura do elemento que você deseja rolar e, em seguida, use o CSS propriedade overflow para definir como você deseja que a rolagem ocorra.

O que fazer com o texto extra?

Quando você tem mais texto do que o espaço do layout, você tem algumas opções:

• Reescreva o texto para que fique mais curto e caiba.
• Permita que o texto flua além dos limites e espere que o layout possa ser flexível para suportá-lo.
• Corte o texto onde ele transborda.
instagram viewer
• 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: criar uma caixa de texto de rolagem. Assim, o texto extra ainda poderá ser lido, mas seu design não será comprometido.

HTML e CSS para isso seriam:

texto aqui... 

O estouro: automático; diz ao navegador para adicionar barras de rolagem se elas forem necessárias para evitar que o texto ultrapasse os limites do div. Mas para que isso funcione, você também precisa das propriedades de estilo de largura e altura definidas no div, de modo que haja limites para transbordar.

Você também pode cortar o texto alterando overflow: auto; para estouro: oculto; Se você omitir a propriedade overflow, o texto ultrapassará os limites do div.

Você pode adicionar barras de rolagem a mais do que apenas texto

Se você tem uma imagem grande que gostaria de exibir em um espaço menor, pode adicionar barras de rolagem ao redor dela da mesma forma que faria com o texto.

Neste exemplo, a imagem 400 x 509 está dentro de um parágrafo de 300 x 300.

As tabelas podem se beneficiar das barras de rolagem

Tabelas longas de informações podem se tornar muito difíceis de ler muito rapidamente, mas ao colocá-las dentro de uma div de tamanho limitado e, em seguida, adicionando a propriedade overflow, você pode gerar tabelas com muitos dados que não ocupam muito espaço em seu 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 overflow:

... 

Uma coisa que acontece quando você faz isso é uma barra de rolagem horizontal geralmente aparece porque o navegador assume que o cromo das barras de rolagem está se sobrepondo à mesa. Existem muitas maneiras de corrigir isso alterando a largura da mesa e outros. Mas nosso favorito é simplesmente desligar a rolagem horizontal com a propriedade CSS 3 overflow-x

Basta adicionar overflow-x: oculto; para o div, e isso removerá a barra de rolagem horizontal. Certifique-se de testar isso, pois pode haver conteúdo que desaparece.

Firefox suporta o uso de tags TBODY para overflow

Um recurso realmente interessante do navegador Firefox é que você pode usar a propriedade overflow em tags de tabela internas, como tbody e thead ou tfoot. Isso significa que você pode definir barras de rolagem no conteúdo da tabela e as células do cabeçalho permanecerão ancoradas acima delas. Isso só funciona no Firefox, o que é muito ruim, mas é um bom recurso se seus leitores usam apenas o Firefox. Navegue até este exemplo no Firefox para ver o que quero dizer.

... NamePhoneJennifer502-5366. 

...