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
Protip : Il est possible de changer la taille directement avec @include truncate(50%);