Sass truncate mixin pour ajouter ... à vos textes

Le 26 August 2015 Par David Leuliette — Modifier l’article

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%);