J'utilise le code html comme suit pour afficher la fenêtre pop-up bootstrap
<a data-original-title="" data-content="Hi,
Welcome !
Sincerely,
programmer
"
data-placement="bottom">
content
</a>
Et j'ai initialisé le popover comme suit
$(this).popover({
html:true
});
Tout fonctionne bien, mais le problème est que le contenu disponible dans le contenu de données n'est pas affiché avec les espaces .... Il supprime toutes les nouvelles lignes et l'affiche sur une seule ligne .... Comment puis-je surmonter cela ....
Vous devez utiliser <br />
pour une nouvelle ligne en html ou utilisez un <pre>
tag
Assurez-vous que data-html="true"
l'attribut est présent.
Pour compléter la solution d'Arun P Johny, si vous trouvez que votre <br />
balises dans le data-content
les valeurs s'affichent en texte brut dans le contenu popover de la page, ajoutez l'attribut supplémentaire data-html="true"
, ainsi:
<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
data-html="true"
data-placement="bottom">
content
</a>
N'oubliez pas que l'utilisation de data-html="true"
introduit une vulnérabilité potentielle à attaques XSS ; ne l'utilisez pas avec une entrée utilisateur non-désinfectée.
Documents: https://getbootstrap.com/docs/3.3/javascript/#popovers-options
Vous pouvez utiliser white-space: pre-wrap;
pour conserver les sauts de ligne dans la mise en forme. Il n'est pas nécessaire d'insérer manuellement des éléments html.
.popover {
white-space: pre-wrap;
}
J'ai réussi à faire fonctionner cela en ajoutant\n à mon texte popover où je veux que les lignes se cassent et en ajoutant ce qui suit à ma feuille de style:
.popover {
white-space: pre-line;
}
Merci à tous pour l'aide!
Il vous suffit d'ajouter data-html = "true" à votre balise, puis toutes vos balises html à l'intérieur du texte d'aide fonctionnent correctement,
Nous avons réussi à utiliser le style de l'espace blanc: le pré-emballage, sauf que nous avons constaté que des espaces supplémentaires étaient ajoutés à l'ensemble du pop-over. Au lieu de cela, nous avons ajouté ce style au contenu popover.
.popover-content {
white-space: pre-wrap;
}