Qual é a diferença entre overflow: hidden e display: none

StackOverflow https://stackoverflow.com/questions/132649

  •  02-07-2019
  •  | 
  •  

Pergunta

O que é a diferença entre overflow: hidden e display:? Nenhuma

Foi útil?

Solução

Exemplo: 

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

Se o texto no bloco com esta classe é maior (mais) do que o que esta pequena caixa pode exibir, o excesso será apenas escondido. Você vai ver o início de apenas o texto.

display: none; só vai esconder o bloco.

Note que é necessário também visibility: hidden; que oculta o conteúdo do bloco, mas o bloco será ainda no layout, mover as coisas.

Outras dicas

display: none remove o elemento da página, e o fluxo da página age como se ele não está lá em tudo.

overflow: hidden:

A propriedade CSS overflow: hidden pode ser usado para revelar mais ou menos de um elemento com base na largura da janela do navegador.

overflow: hidden apenas diz se o texto flui fora deste elemento as barras de rolagem não aparecem. display:. Nenhum diz que o elemento não é mostrado

Um exemplo simples de overflow: hidden http://www.w3schools.com /Css/tryit.asp?filename=trycss_pos_overflow_hidden

Se você editar as CCS nessa página, você pode ver a diferença entre os atributos de transbordamento (visível | escondida | rolagem | auto) - e se você adicionar display: none para o css, você vai ver o bloco de conteúdo todo é desaparece.

Basicamente, é uma forma de controlar o layout e elemento de "fluxo" - se você está permitindo a entrada do usuário (a partir de um exemplo de campo CMS), para processar em um bloco de tamanho fixo, você pode ajustar o atributo estouro parar a caixa aumentando em tamanho e, portanto, quebrar o layout da página. (Inversamente, display: none impede a atuação da exibição e therfore toda a página re-ajusta)

Por padrão, elementos HTML são tão alto quanto necessário para conter seu conteúdo.

Se você der um elemento HTML uma altura fixa, pode não ser grande o suficiente para conter seu conteúdo. Assim, por exemplo, se você tivesse um parágrafo com uma altura fixa e um fundo azul: 

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

O texto dentro do parágrafo que se estendem além da borda inferior do parágrafo.

A propriedade overflow permite alterar esse comportamento padrão. Então, se você adicionou overflow: hidden: 

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

Em seguida, você não veria qualquer texto além da borda inferior do parágrafo. Seria cortada para a altura fixa do parágrafo.

display: none iria simplesmente fazer todo o parágrafo (visualmente) desaparecem, fundo azul e tudo, como se ele não aparecer no HTML em tudo.

Vamos dizer que você tem um div que as medidas 100 x 100px

Você, então, colocar um monte de texto para ele, como ele transborda o div. Se você usar overflow: hidden; então o texto que se encaixa no 100x100 não será exibido, e não afetará layout.

display: none é completamente diferente. Ela torna o resto da página como se , se o div ainda era visível. Mesmo se houver excesso, que serão tidos em conta. Ele simplesmente deixa espaço para a div, mas não torná-lo. Se ambos estão definidas:. display: none; overflow: hidden; então não vai ser exibida, o texto não vai transbordar, ea página será processado como se o div invisível ainda estavam lá

A fim de tornar o div não afeta a renderização em tudo, em seguida, ambos display: none; overflow: hidden; deve ser definido, e também, fazer algo, como jogo de height: 0;. Ou com a width, ou ambos, em seguida, a página será processado como se o div não existe.

overflow: hidden - esconde o transbordamento do conteúdo, em contraste com overflow: auto que mostra as barras de rolagem em um div de tamanho fixo onde é conteúdo interno é maior do que seu tamanho

display: none - esconde um elemento e completamente não participante no layout de conteúdo

P.S. não há diferença entre os dois, eles são completamente alheios

display: significa que nenhum que a tag em questão não aparecem na página em tudo (embora você ainda pode interagir com ele através do dom). Não haverá espaço alocado para ele entre os outros tags. Overflow escondido significa que a tag é processado com uma certa altura e qualquer texto etc, que faria com que a tag de expansão para torná-lo não será exibido. Eu acho que você quer dizer a pedir é visibility: hidden. Isto significa que, ao contrário de exibição nenhum, a etiqueta não é visível, mas o espaço é alocado para ele na página. assim, por exemplo 

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display: none seria:

teste | | test

visibility: hidden seria:

teste | | test

Em visibilidade:. Escondido o tag é processada, ele simplesmente não é visto na página

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top