Come far funzionare la proprietà CSS di overflow con nascosto come valore

123

Sto attraversando un periodo difficile con overflow: hidden .

Fondamentalmente, sto cercando di nascondere l'overflow di un elenco non ordinato che si trova in un file <div>.

Non ho idea del motivo per cui non funziona.

Invece di nasconderlo, rompe il mio elenco da un layout orizzontale a un layout verticale.

L'elenco non ordinato è a carosello e il contenitore è elenco.

Di seguito è riportato il mio codice CSS;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

Qui, il mio HTML;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>
css  overflow  html 
— Darren
fonte
2
C'è qualcosa che impedisce di dare .listun'altezza fissa? Penso che allora funzionerebbe.
— Pekka
2
@Pekka, lo farà, ho controllato. Supponendo che si applichino le regole CSS ( perché l'HTML postato qui non mostra div.bodygli .containerelementi e )
— Gabriele Petrioli
1
Non ha funzionato. Avvolge l'elenco se l'elenco trabocca invece di nasconderlo.
— Darren
1
Come hai <li>ottenuto un layout orizzontale? Ti sei perso mostrarci alcuni CSS? A cosa serve esattamente? Un cursore di immagine?
— Moin Zaman
1
Ciao ragazzi, risulta che non posso usare un menu orizzontale perché il display float o inline si spanderà sempre a causa della larghezza principale. Sto provando un tavolo ora, ma anche questo è un dolore.
— Darren

Risposte:

397

Ok, se qualcun altro ha questo problema, questa potrebbe essere la tua risposta:

Se stai cercando di nascondere elementi con posizionamento assoluto, assicurati che il contenitore di quegli elementi con posizionamento assoluto sia posizionato relativamente.

— Darren
fonte
1
Ho avuto un problema simile con il contenuto relativamente posizionato in un contenitore e avevo bisogno che anche il contenitore fosse relativo. Quindi non si tratta solo di nascondere elementi posizionati in modo assoluto, ma anche di nascondere qualsiasi elemento posizionato. :)
— Chris
10
fantastico - tranne che questo è stupido. overflow: hidden dovrebbe essere nascosto. senza un riferimento astratto alla documentazione qualcuno può fornire una buona ragione per scegliere questo percorso rispetto al percorso che ha più senso?
— user1873073
3
In realtà l'elemento genitore deve solo essere posizionato, il che significa che anche assoluto e fisso sono validi. Fondamentalmente tutto ciò che non è statico.
— Ryan Jenkins,
1
Ottima risposta, ha funzionato anche per il mio scenario. Nel mio caso, il div con overflow: hidden aveva un attributo position: relative. Aggiunta di una posizione: relativa al suo genitore ha risolto il problema.
— Anurag
74

In realtà...

Per nascondere un elemento posizionato in modo assoluto, il contenitore positiondeve essere qualsiasi cosa tranne static. Può essere relativeo fixedin aggiunta a absolute.

— rw-nandemo
fonte
1
Per chiunque altro stia ancora riscontrando questo problema: il bambino deve essere staticposizionato alleato, per quanto ne so. L'impostazione position:relativesia per il genitore che per il bambino non funziona.
— Alvin Wan
6

Oltre alle risposte fornite:

sembra che l'elemento genitore (quello con overflow:hidden) non debba essere display:inline. Il passaggio a ha display:inline-blockfunzionato per me.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
Espandi lo snippet

— Miloš Đakonović
fonte
1
scusa questo non ha senso, come hai fatto ad avere overflow con inline? anche la documentazione è chiara: developer.mozilla.org/en-US/docs/Web/CSS/overflow l'overflow si applica solo al block container
— Temani Afif
1
Certo che ha senso. Prova a posizionare l'elemento figlio assoluto con offset negativo. Puoi commettere un errore del genere con elementi inline predefiniti come LIs e SPAN
— Miloš Đakonović
1
@TemaniAfif e Miloš Đakonović .. È corretto, inline-blocko qualsiasi altro tipo di visualizzazione a blocchi , anche se in questo caso, dove l'elemento con overflow: hiddenha float, funziona anche sugli inlineelementi.
— Ason
1
quando aggiungi la posizione assoluta, l'elemento diventa un elemento di blocco, quindi non è coinvolto alcun inline qui
— Temani Afif
2
@LGSon mettiamo il tuo esempio allora, ma ancora non pertinente a questa domanda .. probabilmente dovrebbe essere adatto a un'altra domanda.
— Temani Afif
1

Evidentemente, a volte, dovrebbero essere impostate anche le proprietà di visualizzazione del genitore dell'elemento contenente l'argomento che non dovrebbe finire, ad esempio:overflow:hidden

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

Perché? Non ne ho idea ma ha funzionato per me. Vedi https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignora lo sniping su stackoverflow!)

— Charles Goodwin
fonte
0

Questo ha funzionato per me

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

Aggiunta position:absolute al contenitore principale lo ha fatto funzionare.

PS: questo è per chiunque cerchi una soluzione per troncare dinamicamente il testo.

EDIT: Questa doveva essere una risposta a questa domanda, ma dal momento che sono correlati e potrebbe aiutare qualcuno su questa domanda, la lascerò qui invece di eliminarla.

— YulePale
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.