Memotong teks yang terlalu panjang

Untuk satu baris, kombinasi tiga properti wajib bersama: white-space: nowrap (jangan turun baris), overflow: hidden (sembunyikan luapan), text-overflow: ellipsis (beri tanda …). Menghilangkan salah satunya membuat efeknya gagal — inilah kenapa orang sering bilang 'ellipsis saya tidak muncul'. Untuk memotong pada beberapa baris sekaligus, pakai -webkit-line-clamp bersama display: -webkit-box, yang kini didukung semua browser besar.

.nama-file {
  width: 150px;
  white-space: nowrap;      /* 1. jangan turun baris */
  overflow: hidden;         /* 2. sembunyikan luapan */
  text-overflow: ellipsis;  /* 3. beri tanda …       */
}