Bir dosya listesinde solda dosya adı, sağda İndir düğmesi var. Kısa adlarda satır düzgün görünüyor. Araya boşluk girmeyen uzun bir CSV adı geldiğinde düğme kartın dışına taşıyor. Metni gösteren span'a üç nokta vermek tek başına yetmeyebiliyor.

Şu küçük örneği boş bir HTML dosyasında deneyebilirsiniz.

<div class="satir">
<div class="bilgi"><span>aralik_ayi_stok_sayimi_2026_su be_istanbul_guncellenmis.csv</span></div>
<button type="button">İndir</button>
</div>

<style>
.satir { display: flex; width: 260px; gap: 8px; }
.bilgi { flex: 1; min-width: 0; }
.bilgi span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir button { flex: none; }
</style>

Geliştirici araçlarında .bilgi üzerindeki min-width: 0 satırını kapatıp açın. Kapalıyken kapsayıcının otomatik asgari genişliğini uzun dosya adı belirliyor. Açınca kapsayıcı düğmeden kalan alana sığacak kadar küçülebiliyor. Üç nokta ise daralan alanın içindeki span'da çiziliyor.

Kendi düzeninize uyarlarken önce display: flex verdiğiniz satırın doğrudan çocuğunu bulun. Arada bir sarmalayıcı varsa küçülmesi gereken öğe çoğu kez o sarmalayıcıdır.