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ù lungo) di quello che questa piccola finestra può visualizzare, l'eccesso sarà semplicemente nascosto. Vedrai solo l'inizio del testo.

display: none; nasconderà il blocco.

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

Answer 2

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

overflow: nascosto :

  

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

Answer 3

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

Answer 4

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

Se modifichi il CCS su quella pagina, puoi vedere la differenza tra gli attributi di overflow (visibile | nascosto | scroll | auto) - e se aggiungi display: nessuno al CSS, vedrai che l'intero blocco di contenuti è scompare.

Fondamentalmente è un modo per controllare il layout e l'elemento "flow" - se si sta consentendo l'input dell'utente (ad esempio un campo CMS), per il rendering in un blocco di dimensioni fisse, è possibile regolare l'attributo di overflow per impedire che la casella aumenti di dimensioni e quindi rompa il layout della pagina. (viceversa, display: none impedisce la visualizzazione dell'elemento e quindi l'intera pagina si adatta nuovamente)

Answer 5

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

Se dai a un elemento HTML un'altezza fissa, potrebbe non essere abbastanza grande da contenere il suo contenuto. Quindi, ad esempio, se avevi 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 si estenderebbe oltre il bordo inferiore del paragrafo.

La proprietà overflow ti consente di modificare questo comportamento predefinito. Quindi, se hai aggiunto overflow: nascosto :

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

Quindi non vedresti alcun testo oltre il bordo inferiore del paragrafo. Sarebbe tagliato all'altezza fissa del paragrafo.

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

Answer 6

Supponiamo che tu abbia un div che misura 100 x 100px

Quindi inserisci un sacco di testo in esso, in modo che trabocchi il div. Se si utilizza overflow: hidden; il testo che si adatta a 100x100 non verrà visualizzato e non influirà sul layout.

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

Al fine di rendere div non influisce affatto sul rendering, quindi entrambi visualizzano: nessuno; overflow: hidden; dovrebbe essere impostato, e inoltre, fare qualcosa come set height: 0; . O con la larghezza , o entrambi, la pagina verrà visualizzata come se il div non esistesse affatto.

Answer 7

overflow: nascosto - nasconde l'overflow del contenuto, in contrasto con l'overflow: auto che mostra le barre di scorrimento su un div di dimensioni fisse in cui il suo contenuto interno è più grande della sua dimensione

display: none: nasconde un elemento e non partecipa completamente al layout del contenuto

P.S. non c'è differenza tra i due, sono completamente indipendenti

Answer 8

display: none significa che il tag in questione non apparirà affatto sulla pagina (anche se puoi ancora interagire con esso attraverso la dom). Non ci sarà spazio allocato per esso tra gli altri tag. Overflow nascosto significa che il tag viene visualizzato con una certa altezza e qualsiasi testo ecc. Che causerebbe l'espansione del tag per renderlo non verrà visualizzato. Penso che ciò che intendi chiedere sia visibilità: nascosto. Ciò significa che a differenza di display none, il tag non è visibile, ma lo spazio è allocato per esso sulla pagina. quindi ad esempio

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

display: nessuno sarebbe:

test | & Nbsp; | test

visibilità: nascosto sarebbe:

test | & Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; | test

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