Cómo hacer que la propiedad CSS de desbordamiento funcione con oculto como valor

123

Lo estoy pasando mal con overflow: hidden.

Básicamente, estoy tratando de ocultar el desbordamiento de una lista desordenada que se encuentra en un archivo <div>.

Sin embargo, no tengo idea de por qué esto no funciona.

En lugar de ocultarlo, rompe mi lista de un diseño horizontal a un diseño vertical.

La lista desordenada es carrusel y el contenedor es lista.

A continuación se muestra mi código 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;
}

Aquí, mi 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
fuente
2
¿Hay algo en contra de dar .listuna altura fija? Creo que funcionaría entonces.
Pekka
2
@Pekka, lo hará, lo comprobé. Suponiendo que se aplican las reglas de CSS ( porque el HTML publicado aquí no muestra div.bodylos .containerelementos y )
Gabriele Petrioli
1
Eso no funcionó. Envuelve la lista si la lista se desborda en lugar de ocultarla.
Darren
1
¿Cómo consiguió el suyo <li>un diseño horizontal? ¿Te has perdido de mostrarnos algo de CSS? ¿Para qué es exactamente esto? ¿Un control deslizante de imágenes?
Moin Zaman
1
Hola chicos, resulta que no puedo usar un menú horizontal porque la pantalla flotante o en línea siempre se derramará debido al ancho principal. Estoy probando una mesa ahora, pero eso también es un fastidio.
Darren

Respuestas:

397

Ok, si alguien más tiene este problema, esta puede ser su respuesta:

Si está intentando ocultar elementos de posición absoluta, asegúrese de que el contenedor de esos elementos de posición absoluta esté relativamente posicionado.

Darren
fuente
1
Tuve un problema similar con contenido relativamente posicionado en un contenedor y necesitaba que el contenedor también fuera relativo. Por lo tanto, no se trata solo de ocultar elementos absolutamente posicionados, sino de ocultar cualquier elemento posicionado que parezca. :)
Chris
10
genial, excepto que esto es estúpido. desbordamiento: oculto debe estar oculto. sin una referencia abstracta a los documentos, ¿alguien puede proporcionar una buena razón para elegir esta ruta frente a la ruta que tiene más sentido?
user1873073
3
En realidad, el elemento padre solo necesita posicionarse, lo que significa que absoluto y fijo también son válidos. Básicamente, cualquier cosa que no sea estática.
Ryan Jenkins
1
Gran respuesta, también funcionó para mi escenario. En mi caso, el div con overflow: hidden tenía una posición: atributo relativo. Agregar una posición: relativa a su padre solucionó el problema.
Anurag
74

Realmente...

Para ocultar un elemento de posición absoluta, el contenedor positiondebe ser cualquier cosa excepto static. Puede ser relativeo fixedademás de absolute.

rw-nandemo
fuente
1
Para cualquier otra persona que todavía pueda tener este problema: el niño debe estar en una staticposición de aliado, por lo que yo sé. La configuración position:relativetanto para el padre como para el hijo no funciona.
Alvin Wan
6

Además de las respuestas proporcionadas:

parece que el elemento padre (el que tiene overflow:hidden) no debe serlo display:inline. Cambiar a display:inline-blockfuncionó para mí.

.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>
Expandir fragmento

Miloš Đakonović
fuente
1
lo siento, esto no tiene sentido, ¿cómo lograste tener un desbordamiento con inline? también la documentación es clara: developer.mozilla.org/en-US/docs/Web/CSS/overflow el desbordamiento se aplica solo al contenedor de bloques
Temani Afif
1
Seguro que tiene sentido. Intente tener un elemento secundario absoluto de posición con desplazamiento negativo. Puede cometer ese error con elementos en línea por defecto, como LI y SPAN
Miloš Đakonović
1
@TemaniAfif y Miloš Đakonović .. Eso es correcto, eso inline-blocksí, o cualquier otro bloque como tipo de visualización, aunque en este caso, donde el elemento con overflow: hiddentiene float, también funciona en inlineelementos.
Ason
1
cuando agrega la posición absoluta, el elemento se convierte en un elemento de bloque, por lo que no hay una línea involucrada aquí
Temani Afif
2
@LGSon pongamos su ejemplo entonces, pero aún no es relevante para esta pregunta ... probablemente debería ser adecuado en otra pregunta.
Temani Afif
1

Evidentemente, a veces, las propiedades de visualización de del elemento primario del elemento que contiene el asunto que no debería terminarse también deben establecerse enoverflow:hidden, por ejemplo:

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

¿Por qué? No tengo idea, pero funcionó para mí. Ver https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (¡ignore las francotiradores en stackoverflow!)

Charles Goodwin
fuente
0

Esto funcionó para mi

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

Añadiendo position:absolute al contenedor principal lo hizo funcionar.

PD: Esto es para cualquiera que busque una solución para truncar texto dinámicamente.

EDITAR: Esto estaba destinado a ser una respuesta para esta pregunta, pero como están relacionados y podrían ayudar a alguien en esta pregunta, también lo dejaré aquí en lugar de eliminarlo.

YulePale
fuente