text-overflow (ellipsis) și -webkit-line-clamp în CSS

/* un singur rând cu „…” */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* mai multe rânduri (3) */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

Ce face text-overflow (ellipsis) și -webkit-line-clamp

text-overflow decide ce se vede când textul nu încape în cutia lui: tăiat brusc (clip) sau cu trei puncte (ellipsis).

Funcționează doar împreună cu alte două reguli: overflow: hidden (textul în plus trebuie ascuns) și white-space: nowrap (textul trebuie să rămână pe un rând). Elementul are nevoie și de o lățime limitată (bloc, celulă de grid sau flex cu min-width: 0).

Pentru mai multe rânduri se folosește -webkit-line-clamp împreună cu display: -webkit-box și -webkit-box-orient: vertical. Deși are prefixul -webkit-, funcționează în Chrome, Firefox și Safari; varianta fără prefix (line-clamp) încă nu este disponibilă.

Valori uzuale

Valoare	Descriere
clip	Textul este tăiat la marginea cutiei (implicit).
ellipsis	Textul tăiat se încheie cu „…”.
-webkit-line-clamp: n	Limitează textul la n rânduri și pune „…” la final.

Exemple

Exemplul 1: Nume lung de produs pe un singur rând

În lista de coș, numele produsului nu are voie să împingă prețul pe rândul următor.

.produs-nume {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

Efect vizual în browser

„Laptop ultraportabil 14 inch, 16 GB RAM, SSD 1 TB, argintiu” apare ca „Laptop ultraportabil 14 inch, 1…”, pe un singur rând de 220px.

Exemplul 2: Descrierea unui articol limitată la 3 rânduri

Cardurile din blog au toate aceeași înălțime, indiferent cât de lung este rezumatul.

.card-rezumat {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Efect vizual în browser

Rezumatul „Ghid complet pentru o zi în Iași…” se oprește după al treilea rând, iar ultimul rând se termină cu „…”.

Greșeli frecvente

• Setarea doar a text-overflow: ellipsis fără overflow: hidden și white-space: nowrap; nu apare niciun „…”.
• Elipsă în copilul unui container flex care nu se micșorează; adaugă min-width: 0 pe elementul flex, altfel textul împinge containerul.
• Ascunderea unor informații importante (prețul, data) în textul tăiat; pune-le în elemente separate sau afișează textul complet într-un atribut title.

Comenzi înrudite

• white-space (nowrap, pre, pre-wrap, pre-line): Decide dacă spațiile și Enter-urile din text se păstrează și dacă textul trece singur pe rândul următor.
• overflow (hidden, scroll, auto): Stabilește ce se întâmplă când conținutul unui element este prea mare pentru a încăpea în dimensiunile sale.
• overflow-wrap, word-break și hyphens: Controlează ruperea cuvintelor foarte lungi (linkuri, coduri) ca să nu iasă din cutie, plus despărțirea automată în silabe.