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

hmm 🙄 Min tekst bliver afskåret øverst så jeg mangler bollen over Å …
Hvis din CSS `line-height` er tæt på 1, og specialtegn som “Å” bliver beskåret øverst er det på grund af `overflow: “hidden”`. Det kan du løse ved at tilføje en smule “padding-top” til din tekst. Dette trick skaber en visuel luft øverst på bogstaverne, så de undgår at blive afskåret og du kan bibeholde den line-height du foretrækker.