90 views

Hoe u de overloop CSS-eigenschap kunt werken met verborgen als waarde

Hosted by Code Expert
css

Ik heb een moeilijke tijd met overflow: hidden.

In principe probeer ik de overloop van een ongeordende lijst te verbergen die zich in een <div>bevindt.

Ik heb geen idee waarom dit niet werkt.

In plaats van het verbergen ervan, breekt het mijn lijst van een horizontale lay-out naar een verticale lay-out.

De ongeordende lijst is carrousel en de container is een lijst.

Hieronder is mijn CSS-code; 

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

Hier, mijn 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>

Antwoord 1, autoriteit 100%

Ok, als iemand anders dit probleem heeft, kan dit jouw antwoord zijn:

Als u absoluut gepositioneerde elementen probeert te verbergen, zorg er dan voor dat de container van die absoluut gepositioneerde elementen relatief gepositioneerd is.

Antwoord 2, autoriteit 17%

Eigenlijk…

Om een absoluut gepositioneerd element te verbergen, moet de container positionalles zijn behalve static. Het kan relativeof fixedzijn naast absolute.

Antwoord 3, autoriteit 2%

Het is duidelijk dat de weergave-eigenschappen van oudervan het element dat de materie bevat die niet mag overlopen, ookook worden ingesteld op overflow:hidden, bijvoorbeeld:

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

Waarom? Ik heb geen idee, maar het werkte voor mij. Zie https://medium.com/@ crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565(negeer het snipen bij stackoverflow!)

Antwoord 4, autoriteit 2%

Naast de gegeven antwoorden:

het lijkt alsof het bovenliggende element (degene met overflow:hidden) nietdisplay:inlinemag zijn. Veranderen naar display:inline-blockwerkte voor mij.

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

Antwoord 5

Ik heb het niet begrepen.
Ik had een soortgelijk probleem, maar dan in mijn navigatiebalk.

Wat ik aan het doen was, is dat ik mijn navBar-code op deze manier bewaarde: nav>div.navlinks>ul>li*3>a

Om hover-effecten op a te zetten, plaatste ik a op relatief en ontwierp a::beforeen a::after, daarna plaatste ik een grijze achtergrond voor en na elementen en hield hover-effecten op een zodanige manier dat als men zweeft op <a>ze van buiten a zullen verschijnen om <a>te vullen.

Het probleem is dat de verborgen overloop niet werkt op <a>.

Wat ik ontdekte is als ik <li>verwijderde en gewoon <a>plaatste zonder <ul>en <li>toen werkte het.

Wat kan het probleem zijn?

Antwoord 6

Dit werkte voor mij

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

Door position:absolutetoe te voegen aan de bovenliggende container werkte het.

PS: dit is voor iedereen die op zoek is naar een oplossing voor het dynamisch inkorten van tekst.

EDIT: dit was bedoeld als antwoord op deze vraagmaar aangezien ze gerelateerd zijn en het iemand zou kunnen helpen bij deze vraag, zal ik het ook hier laten in plaats van het te verwijderen.

Previous articleAttributeError: ‘Module’-object heeft geen attribuut’ URLOPEN ‘
Next articleWat is de C++ -versie van Java’s ArrayList

Other episodes

Stylingmat-select in hoekig materiaal

css Code Expert - 0
Hoe de paneelcomponent van mat-select op te maken. Uit de documenten die ik krijg dat ik panelClass moet leveren, maak ik het als volgt:...
Read more

Hoe maak je schaduw op de rand-onderkant?

css Code Expert - 0
Ik moet de randschaduw toepassen op border-bottom door CSS3. Ik wil alleen CSS3-schaduw onderaan toepassen. Is dit mogelijk? Antwoord 1, autoriteit 100% Probeer: div{ -webkit-box-shadow:0px 1px 1px #de1dde; ...
Read more

Beperk tekstlengte tot n regels met CSS

css Code Expert - 0
Is het mogelijk om een ​​tekstlengte te beperken tot "n" regels met behulp van CSS (of deze te knippen wanneer deze verticaal overloopt). text-overflow: ellipsis;werkt...
Read more

CSS-selector voor uitgeschakeld invoertype=”submit”

css Code Expert - 0
Is er een CSS-kiezer voor uitgeschakelde input type="submit"of "button"? Moet ik gewoon inputgebruiken? Werkt dat in IE6? Antwoord 1, autoriteit 100% Werkt dat in IE6? Nee, IE6 ondersteunt...
Read more

Chrome-afdrukwebsite, ontbrekende lay-outopties

css Code Expert - 0
Ik heb een website gemaakt en een deel van de site is ontworpen om in staande modus op tabloidpapier te worden afgedrukt. Het probleem...
Read more

Hoe gebruik je afbeeldingen in css met Webpack

css Code Expert - 0
Ik ben bezig met het maken van een React w/ Webpack-configuratie en heb moeite om te doen wat een eenvoudige taak lijkt te zijn....
Read more

Verschil tussen uitvul-inhoud versus uitlijn-items?

css Code Expert - 0
Ik vind het heel moeilijk om te begrijpen wat het verschil is? Uit mijn onderzoek blijkt dat justify-contentkan doen... space-betweenen space-around, terwijl align-itemskan doen......
Read more

© Copyright - Code Expert 2021