Proposition: Gestion des messages multi-lignes

[7studio]

Chaque test dispose de son propre message, afin d’informer et de guider au maximum l’intégrateur en quête d’amélioration.

Cependant, je me suis bêtement aperçu que les messages qui reviennent à la ligne par manque de place ne s'affichent pas correctement.

Quelques modifications mineures résoudront rapidement ce léger désagrément :

1. Laisser le navigateur calculer la hauteur de l'élément
   height: auto !important;
2. Définir un interligne approprié aux multi-lignes
   font: normal normal 1rem/1.4 "Lucida Sans Unicode", "Lucida Sans", sans-serif !important;
3. Libérer la fonction de transformation grâce aux pourcentages
   transform: translateY( -100% ) translateZ( 0 ) !important;

mais il serait dommage de s'arrêter en si bon chemin.

Maintenant que notre boite est affranchie de ses limites, le must serait de pouvoir maîtriser ces sauts de ligne à l'intérieur de notre message.
Comme rien n'est impossible, voici la ligne nécessaire à cette proposition :

%message {

  &::after {
    white-space: pre;
  }

}

Il ne restera plus qu'à placer la séquence de caractères \A à l'endroit désiré pour obtenir un saut de ligne.
Exemple :

content: "#{$error-ico} Attribut [alt] manquant. Quelle hérésie.\A @see : BP1 OpQuast." !important;

et en pratique dans un Fiddle : http://jsfiddle.net/7studio/U3cb7/

En espérant que vous trouverez cela utile.

Ressources supplémentaires :

• Flexible multiline definition lists with 2 lines of CSS 2.1 par Lea Verou
• http://www.w3.org/wiki/CSS/Properties/white-space

[ffoodd]

C’est extrêmement utile oui, je n’avais effectivement pas pensé à ça !

Partant du principe que l’on travaillait majoritairement sur «grand écran» les messages manquaient effectivement de souplesse. Et l’utilisation de white-space et \A est très maline, je ne connaissais pas cette astuce.

Merci de m’en apprendre autant, l’outil devrait bien évoluer aujourd’hui !