[CSS] Encore quelques effets avancés… – LeHollandaisVolant

4 mars 2016
0
Attention, cet article date de 8 ans, les informations peuvent ne plus être à jour...

http://lehollandaisvolant.net/?d=2016/03/01/17/03/37-css-encore-quelques-effets-avances

Sympa l’effet pour le débordement de texte !

Cependant, je me permets de compléter pour le cas de liens (anchor tags, les balises <a>).
Par défaut, les balises <a> sont en inline et non en block, il est donc impossible de manière usuelle de passer par le CSS pour faire une troncature par ellipsis.
Mais, on peut contourner le problème en ciblant le <a>. Je prends mon exemple de page pour les articles du site :

.content a {
     display: flow-root; ou display: block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: bottom;
     max-width: 100%;
     margin-right: 5px;
 }

Il suffit d’assigner ensuite une largeur maximale du block via « max-width ». Ici, le 100% signifie que le block ne peut pas dépasser la largeur du « content », autrement dit, il ne peut pas dépasser l’espace réservé au texte de l’article.
S’il dépasse il se voit attribuer une troncature.
Dans mon cas, je souhaite que cette coupure ne s’effectue que pour les petits écrans (maximum 720px), j’ai donc inclus mon code dans une règle spécifique à ajouter en fin de code.

@media all and (max-width: 720px) {
   .content a {
     display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: bottom;
     max-width: 100%;
   }
 }

Les commentaires sont fermés pour cet article.