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