Normal şartlarda, CSS'in "ellipsis" özelliği sorunsuz olarak çalışır. Ancak CSS Flexbox modelinde ne yazık ki sorun çıkarabilmektedir. Neredeyse tüm tarayıcılarda bu sorun yaşanır. Bu konuda araştırma sağladım ve sonunda bir sonuca ulaştım. Eğer ki sitenizdeki bir bölümde, ellipsis (üç nokta) özelliği sorun çıkarıyor ise ve elbette ilgili bölümde Flexbox kullanılıyor ise, çözümü basit. Aşağıdaki adımları ve önerileri uygulamanız yeterli olacaktır. Bu şekilde, sorunsuz olarak CSS Flexbox modelinde ellipsis özelliğini kullanmaya devam edebilirsiniz.

CSS Flexbox "ellipsis" Çalışmıyor Sorunu ve Çözümü

Öncelikle ilgili div'imize ellipsis kodlarını ekliyoruz. Ancak bir de içerisine kırmızı alandaki kodu ekliyoruz.

.flexboxdiv {
min-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Not: Yukarıdaki kırmızı kod ile sorun çözülmez ise, ilgili bölüme aşağıdaki kodu eklemeniz, kesin sonuca ulaşmanızı sağlayacaktır.

min-width: 0;