CSS text-overflow: ellipsis; virker ikke ordentligt eller skubber d-flex indhold til maks bredde
I min html struktur bruger jeg Bootstrap flex og jeg stod over for et problem med text-overflow: ellipsis; og den klassiske måde at lave den på.
Hvad er text-overflow: ellipsis;? text-overflow: ellipsis; sørger for at hvis sætningen er længere end sin blok, sætter den … og sørger for at sætningen kun fylder en linje, fremfor flere. For at få tekst til at overløbe sin container skal du indstille andre CSS-egenskaber: overflow og white-space.
Problemet opstod da min venstre kolonne gør brug af en variabel bredde i flex, som fylder sig ud i forhold til bredden på den modsatte kolonne. Men min css class for text-overflow med white-space: nowrap; gjorde altså at den venstre kolonne blev 100% i bredden og skubbede col-md-3 bagefter. Synderen var white-space: nowrap;, Jeg kan ikke helt forklare hvordan at den inden i en anden container kan få lov til at skubbe sin parent ramme, men det skete og nedenstående fiksede det.
Min html struktur ramme. Inden i hver kolonne er indholdet som ikke bestemmer bredden på selve denne forælder ramme, men får en maks bredde af sin forælder
<div class="row">
<div class="col-md"></div>
<div class="col-md-3"></div>
</div>
Se video af fix
Klassisk CSS class for ellipsis overflow som forårsaget fejlen
.overflow-txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Bedre fremgangsmåde som sikre at overflow ikke sker
.overflow-txt {
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}