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

Ce n’est pas fini

Ai-je manqué quelque chose? Le contenu n'est plus à jour? Contactez @flexbox_
Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web.

Partager cet article

Sass truncate mixin pour ajouter ... à vos textes

Tweet