Como fazer a propriedade CSS de estouro funcionar com oculto como valor

123

Estou passando por um momento difícil overflow: hidden.

Basicamente, estou tentando ocultar o excesso de uma lista não ordenada localizada em um arquivo <div>.

Eu não tenho idéia por que isso não está funcionando embora.

Em vez de ocultá-lo, ele divide minha lista de um layout horizontal para um layout vertical.

A lista não ordenada é carrossel e o contêiner é lista.

Abaixo está o meu 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;
}

Aqui, meu 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
Há alguma coisa contra se dar .listuma altura fixa? Eu acho que funcionaria então.
— Pekka
2
@Pekka, verifiquei. Supondo que as regras CSS se apliquem ( porque o HTML postado aqui não mostra div.bodyos .containerelementos e )
— Gabriele Petrioli
1
Isso não funcionou. Ele quebra a lista se ela estourar em vez de ocultá-la.
— Darren
1
Como você <li>conseguiu um layout horizontal? Você deixou de nos mostrar um pouco de CSS? O que exatamente é isso? Um controle deslizante de imagem?
— Moin Zaman
1
Oi pessoal, acontece que não posso usar um menu horizontal porque a exibição flutuante ou embutida sempre vaza por causa da largura dos pais. Estou tentando uma mesa agora, mas isso também é uma dor.
— Darren

Respostas:

397

Ok, se alguém tiver esse problema, esta pode ser sua resposta:

Se você estiver tentando ocultar elementos posicionados absolutos, verifique se o contêiner desses elementos posicionados absolutos está relativamente posicionado.

— Darren
fonte
1
Eu tive um problema semelhante com o conteúdo relativamente posicionado em um contêiner e precisava que ele também fosse relativo. Portanto, não está apenas ocultando elementos absolutamente posicionados, mas sim ocultando quaisquer elementos posicionados. :) #
— 226
10
ótimo - exceto que isso é idiota. estouro: oculto deve estar oculto. sem uma referência abstrata aos documentos, alguém pode fornecer um bom motivo para escolher essa rota versus a rota que faz mais sentido?
— user1873073
3
Na verdade, o elemento pai só precisa ser posicionado, o que significa que absoluto e fixo também são válidos. Basicamente, qualquer coisa que não seja estática.
— Ryan Jenkins
1
Ótima resposta, funcionou para o meu cenário também. No meu caso, o div com overflow: hidden tinha uma posição: atributo relativo. Adicionando uma posição: em relação ao pai, corrigimos o problema.
— Anurag
74

Na realidade...

Para ocultar um elemento posicionado absoluto, o contêiner positiondeve ser qualquer coisa, exceto static. Pode ser relativeou fixedalém de absolute.

— rw-nandemo
fonte
1
Para qualquer outra pessoa que ainda esteja enfrentando esse problema: a criança deve estar staticposicionada como aliada, até onde eu saiba. A configuração position:relativepara pai e filho não funciona.
— Alvin Wan
6

Além das respostas fornecidas:

parece que o elemento pai (aquele com overflow:hidden) não deve ser display:inline. Mudar para display:inline-blockfuncionou para mim.

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

— Miloš Đakonović
fonte
1
desculpe, isso não faz sentido, como você conseguiu transbordar com o inline? também a documentação é clara: developer.mozilla.org/en-US/docs/Web/CSS/overflow o transbordamento aplica-se apenas para o recipiente do bloco
— temanitas Afif
1
Claro que faz sentido. Tente posicionar o elemento filho absoluto com deslocamento negativo. Você pode fazer tal erro com linha por elementos padrão, como LIs e se estende
— Miloš Đakonović
1
@TemaniAfif e Miloš Đakonović .. Isso está correto, isso inline-blockserá ou qualquer outro bloco como o tipo de exibição, embora neste caso, onde o elemento com overflow: hiddentenha float, ele também funcione nos inlineelementos.
— Ason
1
quando você adiciona posição absoluta, o elemento de tornar-se um elemento de bloco para que não haja linha envolvido aqui
— temanitas Afif
2
@LGSon, vamos colocar o seu exemplo, mas ainda não é relevante para esta questão. Provavelmente deve ser adequado para outra questão.
— Temani Afif 18/08/19
1

Evidentemente, às vezes, as propriedades de exibição do pai do elemento que contém o assunto que não deveria terminar também também devem ser definidas overflow:hidden, por exemplo:

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

Por quê? Não faço ideia, mas funcionou para mim. Consulte https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignore o sniping no stackoverflow!)

— Charles Goodwin
fonte
0

Isso funcionou para mim

<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 adição position:absoluteao contêiner pai fez com que funcionasse.

PS: é para quem procura uma solução para truncar texto dinamicamente.

EDIT: Isso deveria ser uma resposta para esta pergunta, mas como eles estão relacionados e pode ajudar alguém nessa questão, eu também a deixarei aqui em vez de excluí-la.

— YulePale
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.