Comment faire fonctionner la propriété CSS de débordement avec caché comme valeur

123

J'ai du mal avec overflow: hidden.

Fondamentalement, j'essaie de masquer le débordement d'une liste non ordonnée qui se trouve dans un fichier <div>.

Je n'ai aucune idée de pourquoi cela ne fonctionne pas.

Au lieu de le cacher, il brise ma liste d'une disposition horizontale à une disposition verticale.

La liste non ordonnée est un carrousel et le conteneur est une liste.

Voici mon code 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;
}

Ici, mon 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
la source
2
Y a-t-il quelque chose qui s'oppose à .listune hauteur fixe? Je pense que cela fonctionnerait alors.
Pekka
2
@Pekka, ça va, j'ai vérifié. En supposant que les règles CSS s'appliquent ( parce que le HTML publié ici ne montre pas div.bodyles .containeréléments et )
Gabriele Petrioli
1
Cela n'a pas fonctionné. Il enveloppe la liste si la liste déborde au lieu de la cacher.
Darren
1
Comment avez-vous <li>obtenu une mise en page horizontale? Avez-vous manqué de nous montrer du CSS? A quoi ça sert exactement? Un curseur d'image?
Moin Zaman
1
Salut les gars, il s'avère que je ne peux pas utiliser un menu horizontal car l'affichage flottant ou en ligne débordera toujours à cause de la largeur du parent. J'essaye une table maintenant mais c'est aussi un problème.
Darren

Réponses:

397

Ok si quelqu'un d'autre a ce problème, cela peut être votre réponse:

Si vous essayez de masquer des éléments positionnés absolus, assurez-vous que le conteneur de ces éléments positionnés absolus est positionné de manière relative.

Darren
la source
1
J'avais un problème similaire avec le contenu relativement positionné dans un conteneur et j'avais besoin que le conteneur soit également relatif. Donc, il ne cache pas seulement les éléments positionnés de manière absolue, il cache tous les éléments positionnés qui lui ressemblent. :)
Chris
10
super - sauf que c'est idiot. débordement: caché doit être caché. sans une référence abstraite aux documents, quelqu'un peut-il fournir une bonne raison de choisir cette route par rapport à la route qui a plus de sens?
user1873073
3
En fait, l'élément parent n'a besoin que d'être positionné, ce qui signifie qu'absolu et fixe sont également valides. Fondamentalement, tout ce qui n'est pas statique.
Ryan Jenkins
1
Excellente réponse, a également fonctionné pour mon scénario. Dans mon cas, le div avec overflow: hidden avait un attribut position: relative. L'ajout d'une position: par rapport à son parent a résolu le problème.
Anurag
74

Réellement...

Pour masquer un élément positionné absolu, le conteneur positiondoit être tout sauf pour static. Cela peut être relativeou fixeden plus de absolute.

rw-nandemo
la source
1
À toute autre personne qui rencontre peut-être encore ce problème: l'enfant doit être staticpositionné comme un allié, pour autant que je sache. Le réglage position:relativeà la fois du parent et de l'enfant ne fonctionne pas.
Alvin Wan
6

En plus des réponses fournies:

il semble que l'élément parent (celui avec overflow:hidden) ne doit pas l' être display:inline. Changer pour a display:inline-blockfonctionné pour moi.

.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>
Développer l'extrait

Miloš Đakonović
la source
1
désolé cela n'a pas de sens, comment avez-vous réussi à avoir un débordement avec inline? aussi la documentation est claire: developer.mozilla.org/en-US/docs/Web/CSS/overflow le débordement s'applique uniquement au conteneur de bloc
Temani Afif
1
Bien sûr, cela a du sens. Essayez d'avoir l'élément enfant absolu de position avec un décalage négatif. Vous pouvez faire une telle erreur avec des éléments en ligne par défaut tels que des LI et des SPAN
Miloš Đakonović
1
@TemaniAfif et Miloš Đakonović .. C'est correct, ça inline-blockva, ou tout autre bloc comme le type d'affichage, bien que dans ce cas, où l'élément avec overflow: hiddena float, il fonctionne aussi sur des inlineéléments.
Ason
1
lorsque vous ajoutez la position absolue, l'élément devient un élément de bloc donc il n'y a pas d'inline impliqué ici
Temani Afif
2
@LGSon mettons donc votre exemple, mais toujours pas pertinent pour cette question .. devrait probablement convenir à une autre question.
Temani Afif
1

Évidemment, parfois, les propriétés d'affichage du parent de l'élément contenant le sujet qui ne devrait pas se terminer devraient également être définies sur overflow:hidden, par exemple:

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

Pourquoi? Je n'ai aucune idée mais cela a fonctionné pour moi. Voir https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignorez le sniping à stackoverflow!)

Charles Goodwin
la source
0

Cela a fonctionné pour moi

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

L'ajout position:absoluteau conteneur parent l'a fait fonctionner.

PS: Ceci s'adresse à tous ceux qui recherchent une solution pour tronquer le texte dynamiquement.

EDIT: C'était censé être une réponse à cette question, mais comme ils sont liés et que cela pourrait aider quelqu'un sur cette question, je vais également le laisser ici au lieu de le supprimer.

YulePale
la source