Qual è la differenza tra overflow: hidden e display: none

Question

Qual è la differenza tra overflow: hidden e display: none?

Answer 1

Esempio:

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

Se il testo nel blocco con questa classe è più grande (più) di quello che questa piccola scatola in grado di visualizzare, l'eccedenza sarà solo nascosto. Vedrai solo l'inizio del testo.

display: none; nasconderà il blocco.

Nota anche visibility: hidden; che nasconde il contenuto del blocco, ma il blocco sarà ancora nel layout, spostando le cose.

Answer 2

Overflow: nascosto dice solo se il testo scorre al di fuori di questo elemento le barre di scorrimento non vengono visualizzate. display: nessuno dice che l'elemento non è mostrato.

Answer 3

Diciamo che avete un div che misura 100 x 100px

possibile quindi mettere un sacco di testo in esso, come ad esempio trabocca il div. Se si utilizza overflow: hidden;, il testo che si inserisce nel 100x100 non verrà visualizzato e non influenzerà il layout.

display: none è completamente diverso. Rende il resto della pagina come se se il div fosse ancora visibile. Anche in caso di overflow, questo verrà preso in considerazione. Lascia semplicemente lo spazio per il div, ma non lo rende. Se sono impostati entrambi, display: none; overflow: hidden;, non verrà visualizzato, il testo non verrà traboccato e la pagina verrà visualizzata come se l'invisibile div fosse ancora lì.

Per rendere il div non influisce affatto sul rendering, quindi è necessario impostare sia display: none; overflow: hidden; sia fare qualcosa come ad esempio height: 0;. Oppure con width o entrambi, la pagina verrà visualizzata come se il div non esistesse affatto.

Answer 4

display: none rimuove l'elemento dalla pagina e il flusso della pagina si comporta come se non fosse affatto lì.

overflow: hidden:

Il CSS overflow: hidden proprietà può essere utilizzata per rivelare più o meno di un elemento in base alla larghezza della finestra del browser.

Answer 5

display: nessuno significa che il tag in questione non verrà visualizzato nella pagina (sebbene sia ancora possibile interagire con esso tramite il dom). Non ci sarà spazio per questo tra gli altri tag. Overflow nascosto significa che il tag viene reso con una certa altezza e qualsiasi testo ecc. Che causerebbe l'espansione del tag per renderlo non visibile. Penso che quello che intendi chiedere è la visibilità: nascosta. Ciò significa che, a differenza del display none, il tag non è visibile, ma lo spazio è assegnato per esso sulla pagina.così per esempio

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

display: none sarebbe:

prova |   | prova

visibilità: nascosto sarebbe:

test |                                             | test

In visibilità: nascosto il tag viene visualizzato, non è visibile sulla pagina.

Answer 6

semplice esempio di overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

Se si modificano le CCS in quella pagina, si può vedere la differenza tra il troppo pieno attributi (visibile | hidden | scroll | auto) - e se si aggiunge display: none al css, vedrai scomparire l'intero blocco del contenuto.

Fondamentalmente è un modo di controllare il layout e l'elemento "flusso": se si autorizza l'input dell'utente (da un campo CMS), per eseguire il rendering in un blocco di dimensioni fisse, è possibile regolare l'attributo di overflow per arrestare l'aumento della casella in dimensioni e quindi rompere il layout della pagina. (viceversa, display: nessuno impedisce la visualizzazione dell'elemento e quindi l'intera pagina si aggiusta)

Answer 7

overflow: nascosto - nasconde l'overflow del contenuto, in contrasto con l'overflow: auto che mostra barre di scorrimento su un div di dimensione fissa dove è contenuto interiore è più grande la sua dimensione

display: none - si nasconde un elemento e completamente non lo fa partecipe layout del contenuto

PS non c'è differenza tra i due, sono completamente indipendenti

Answer 8

Per impostazione predefinita, gli elementi HTML sono alti quanto necessario per contenere il loro contenuto.

Se si attribuisce un elemento HTML ad altezza fissa, potrebbe non essere abbastanza grande da contenere il suo contenuto. Così, per esempio, se si ha un paragrafo con un altezza fissa e uno sfondo blu:

<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; 
} 

Il testo all'interno del paragrafo dovrebbe estendersi oltre il bordo inferiore del paragrafo.

La proprietà overflow consente di modificare questo comportamento predefinito. Quindi, se si aggiunge overflow: hidden:

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

Allora non avrebbe visto qualsiasi testo oltre il bordo inferiore del paragrafo. Sarebbe ritagliato all'altezza fissa del paragrafo.

display: none farebbe semplicemente scomparire l'intero paragrafo (visivamente), sfondo blu e tutto, come se non fosse affatto visualizzato nell'HTML.