A propriedade overflow especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado, exibido com barras de rolagem ou se transborda do elemento.
O uso da propriedade overflow com valor diferente de visible (seu valor padrão), criará um novo. Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo para ajustar a disposição do texto. A quebra das linhas ocorre sempre que a barra de rolagem é utilizada, tornando a experiência de rolagem lenta.
overflow-x e overflow-y: Essas propriedades permitem controlar o comportamento de overflow horizontal (overflow-x) e vertical (overflow-y) separadamente. Você pode definir cada uma delas como visible (padrão), hidden (ocultar o conteúdo que excede os limites), scroll (adicionar barras de rolagem quando necessário) ou auto (adicionar barras de rolagem apenas quando necessário).Exemplo:
.overflow-container {
width: 200px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
overflow: Esta é uma propriedade abreviada que permite definir o comportamento de overflow para ambos os eixos (horizontal e vertical) em uma única declaração. Você pode usar os mesmos valores que em overflow-x e overflow-y.Exemplo:
.overflow-container {
width: 200px;
height: 100px;
overflow: auto; /* Pode ser 'visible', 'hidden', 'scroll', ou 'auto' */
}
overflow-wrap: Esta propriedade controla como as palavras longas ou sem quebras de linha são tratadas quando o conteúdo excede os limites do contêiner. Você pode definir isso como normal (o comportamento padrão, as palavras podem transbordar o contêiner) ou break-word (as palavras longas podem ser quebradas para caber no contêiner).Exemplo:
.overflow-container {
width: 200px;
height: 100px;
overflow: hidden;
overflow-wrap: break-word;
}
Estas são as principais propriedades relacionadas ao controle de overflow em CSS. Elas permitem que você gerencie como o conteúdo excedente deve ser tratado, seja ocultando-o, adicionando barras de rolagem ou quebrando palavras longas para melhorar a legibilidade