Tronquer des caractères en CSS avec Ellipsis

Éviter que votre texte ne passe sur plusieurs lignes

Sass truncate mixin pour ajouter ... à vos textes

Il m’arrive souvent de rencontrer ce problème : un titre trop long passe sur plusieurs lignes ce qui casse la mise en page. Il est possible de tronquer le texte après une ceraine taille dans un framework comme rails, mais le texte n’est plus indexable.

La solution est d’utiliser du CSS. Voici un exemple de mixin Sass réutilisable :

  @mixin truncate($width: 100%) {
    max-width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

Utilisation

Sass

  .card {
    &-title {
      @include truncate();
    }
  }

CSS

  .card-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

Démonstration

Voici un exemple avant / après

Truncate mixin sass exemple

Protip : Il est possible de changer la taille directement avec @include truncate(50%);

Sass truncate mixin pour ajouter ... à vos textes