Du text-overflow: ellipsis et un élément à width: 100%.

25 November 2016

J’étais en train de bricoler une div avec une largeur à 100% et un texte-overflow ellipsis.

Cela ne fonctionne pas en l’état :

.ma_div {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
}

Pourquoi ? Je ne sais pas trop, mais avec quelques règles en plus on peut avoir le résultat que l’on attend, a savoir une div “fluide” et un texte avec “…” pour ce qui dépasse :

.ma_div {
  display: table;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  table-layout: fixed;
  text-overflow: ellipsis;
}