Comment ajouter des sauts de ligne dans une infobulle HTML ?
J'ai essayé d'utiliseret \n dans l'infobulle comme suit :
Survolez-moiCependant, cela était inutile et je pouvais voir le texte littéralet \n dans l'infobulle. Toutes suggestions seront utiles.
Si le code de l'entité ne fonctionne pas, essayez je utilise linux et chrome pas sûr des autres navigateurs
J'ai essayé ceci et cela fonctionne lorsque je l'injecte en utilisant l'inspecteur d'éléments, mais pas lorsque je l'inclus dans mon html et le déploie avec ce caractère. Une raison évidente que je pourrais manquer ?
J'ai passé un certain temps à essayer de faire fonctionner cela. Le fait que le style white-space: pre-line; soit nécessaire est très caché.
CSS est finalement ce qui a fonctionné pour moi en conjonction avec un retour à la ligne dans mon éditeur :
.tooltip-inner {
white-space: pre-wrap;
}Retrouvé ici : Comment faire en sorte que les infobulles Twitter Bootstrap aient plusieurs lignes ?
Il est possible d'ajouter des sauts de ligne dans les infobulles HTML natives en ayant simplement l'attribut title réparti sur plusieurs lignes.
Cependant, je recommande d'utiliser un plugin d'infobulle jQuery tel que Q-Tip : http://craigsworks.com/projects/qtip/.
C'est simple à mettre en place et à utiliser. Alternativement, il existe également de nombreux plugins d'infobulle JavaScript gratuits.
edit: correction sur la première déclaration.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
5 votes
J'ai eu la même question : stackoverflow.com/questions/3320081/…
2 votes
Utiliser data-html="true"Référence et remerciements à: stackoverflow.com/a/19001875/2278891
1 votes
En asp.net (C# .NET 4.5 Framework) l'ajout de
Environment.NewLinefonctionne pour ajouter un saut de ligne côté code... pas de complications... pas de désordre...1 votes
La réponse ci-dessous, de Dan, fonctionne parfaitement. Il suffit d'ajouter dans le CSS de cet élément la ligne de code suivante:
.tooltip-inner { white-space: pre-wrap; }