The CSS Podcast - 034: Overflow
Quando o conteúdo se estende além do pai, há muitas opções de como você pode lidar com ele. Você pode rolar para adicionar mais espaço, cortar as bordas que estão fora da tela, indicar o corte com reticências e muito mais. O overflow é especialmente importante ao desenvolver para aplicativos de smartphone e vários tamanhos de tela.
Há duas opções de recorte diferentes no CSS: text-overflow
ajuda com linhas individuais de texto, e as propriedades overflow
ajudam a controlar o overflow no modelo de caixa.
Linha única com text-overflow
Use a propriedade text-overflow
em qualquer elemento que contenha nós de texto, por exemplo, um parágrafo, <p>
. Ele especifica como o texto aparece quando não cabe no espaço disponível do elemento. Todo o texto HTML visível em uma página está em nós de texto. Para usar text-overflow
, você precisa de uma única linha de texto descompactada. Portanto, também é necessário definir overflow
como hidden
e ter um valor white-space
que impeça o agrupamento.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Como usar propriedades de overflow
As propriedades de overflow são definidas em um elemento para controlar o que acontece quando os filhos precisam de mais espaço do que o disponível. Isso pode ser intencional, como em um mapa interativo, como o Google Maps, em que o usuário movimenta uma imagem grande cortada para um tamanho específico. Também pode ser não intencional, como em um aplicativo de chat em que o usuário digita uma mensagem longa que não cabe no balão de texto.
Você pode pensar no overflow em duas partes. O elemento pai tem um espaço firmemente limitado que não vai mudar. Pense nisso como uma janela. Os elementos filhos são o conteúdo que precisa de mais espaço do elemento pai. Pense nisso como o que você está vendo pela janela. Gerenciar o overflow ajuda a orientar como a janela enquadra esse conteúdo.
Rolagem no eixo vertical e horizontal
A propriedade overflow-y
controla o overflow físico ao longo do eixo vertical da viewport do dispositivo, rolando para cima e para baixo.
A propriedade overflow-x
controla o overflow ao longo do eixo horizontal da viewport do dispositivo, rolando para a esquerda e para a direita.
Propriedades lógicas para a direção da rolagem
As propriedades overflow-inline
e overflow-block
definem o overflow com base na direção do documento e no modo de gravação.
Abreviação overflow
A abreviação overflow
define os estilos overflow-x
e overflow-y
em uma linha:
overflow: hidden scroll;
Se duas palavras-chave forem especificadas, a primeira será aplicada a overflow-x
e a segunda a overflow-y
. Caso contrário, overflow-x
e overflow-y
usam o mesmo valor.
Valores
Vamos analisar em mais detalhes os valores e as palavras-chave disponíveis para as propriedades overflow
.
overflow: visible
(padrão)- Sem definir a propriedade,
overflow: visible
é o valor padrão para a Web. Isso garante que o conteúdo nunca seja ocultado acidentalmente e segue os princípios básicos de "nunca ocultar conteúdo" ou "layouts seguros de layouts precisos". overflow: hidden
- Com
overflow: hidden
, o conteúdo é cortado na direção especificada, e nenhuma barra de rolagem é mostrada. overflow: scroll
- O
overflow: scroll
ativa as barras de rolagem para que os usuários naveguem pelo conteúdo. Mesmo que o conteúdo não esteja transbordando, as barras de rolagem vão estar presentes. Essa é uma ótima maneira de reduzir a mudança de layout no futuro, caso um contêiner possa ser rolável no futuro com base, por exemplo, no redimensionamento, e preparar visualmente o usuário para áreas roláveis. overflow: clip
- Como
overflow: hidden
, o conteúdo comoverflow: clip
é cortado na caixa de padding do elemento. A diferença entreclip
ehidden
é que a palavra-chaveclip
também proíbe toda a rolagem, incluindo a programática. overflow: auto
- Por fim, o valor mais usado,
overflow: auto
. Isso respeita as preferências do usuário e mostra barras de rolagem, se necessário, mas as oculta por padrão e transfere a responsabilidade pela rolagem para o usuário e o navegador.
Rolagem e overflow
Muitos desses comportamentos overflow
apresentam uma barra de rolagem, mas há alguns comportamentos e propriedades específicos de rolagem que podem ajudar a controlar a rolagem no contêiner de overflow.
Rolagem e acessibilidade
É importante garantir que a área rolável possa receber foco para que um usuário do teclado possa usar a tecla Tab para selecionar a caixa e depois as teclas de seta para rolar.
Para permitir que uma caixa de rolagem aceite o foco, adicione tabindex="0"
, um nome com o atributo aria-labelledby
e um atributo role
adequado. Exemplo:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
O CSS pode ser usado para indicar que a caixa tem foco, usando a propriedade outline
para dar uma dica visual de que ela agora pode ser rolada.
Em Como usar CSS para aplicar a acessibilidade, Adrian Roselli mostra como o CSS pode ajudar a evitar regressões de acessibilidade. Por exemplo, para ativar a rolagem e adicionar o indicador de foco apenas se os atributos corretos forem usados. As regras a seguir só vão permitir que a caixa seja rolada se ela tiver um atributo tabindex
, aria-labelledby
e role
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Posicionamento da barra de rolagem no modelo de caixa
As barras de rolagem ocupam espaço dentro da caixa de padding e podem competir por espaço se inline
e não overlaid
. O módulo de modelo de caixa detalha essa possível fonte de mudança de layout.
root-scroller x implicit-scroller
Alguns roladores têm um comportamento de puxar para atualizar e outros comportamentos especiais, especialmente ao desenvolver para aplicativos móveis e híbridos. Esse comportamento de rolagem acontece no botão de rolagem raiz. Há apenas um scroller raiz em uma página. Por padrão, o documentElement é o scroller raiz da página. No entanto, ao mudar qual elemento é o scroller raiz, os comportamentos especiais podem ser aplicados a scrollers diferentes do documentElement. Chamamos esse novo scroller de scroller raiz implícito.
Para criar um scroller raiz, use a promoção de scroller posicionando um contêiner como fixo, garantindo que ele cubra toda a janela de visualização e esteja no índice z na parte de cima com um scroller. Confira um scroller raiz e um scroller implícito aninhado aqui.
scroll-behavior
scroll-behavior
permite ativar a rolagem controlada pelo navegador para elementos. Isso permite especificar como a navegação na página, como .scrollTo()
ou links, é processada.
Isso é útil principalmente quando usado com prefers-reduced-motion para especificar o comportamento de rolagem com base na preferência do usuário.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
Se você já chegou ao fim de uma sobreposição modal e depois continuou rolando a página por trás dela, isso se refere ao encadeamento de rolagem, ou seja, à espreita do contêiner de rolagem pai. A propriedade overscroll-behavior
permite impedir que a rolagem de overflow vaze para um contêiner pai (chamado de encadeamento de rolagem).
Teste seu conhecimento
Teste seus conhecimentos sobre overflow
O excesso de texto e o excesso de elementos são iguais?
A propriedade overflow
aceita duas palavras-chave. A primeira palavra-chave é para qual eixo?
Qual espaço no modelo de caixa as barras de rolagem consomem ao aparecer e inline?
Para capturar o momentum extra da rolagem em um scroller implícito aninhado, qual propriedade você usaria?
scroll-hint
overscroll-effect
scroll-padding
scroll-behavior
overscroll-behavior
Recursos
Overflow And Data Loss In CSS from Smashing Magazine (em inglês)