Bootstrap liste des peaux les sauts de ligne
j'utilise le code html comme suit pour afficher le popover de 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
});
Tous fonctionne bien mais le problème est le contenu disponible dans les données-contenu n'est pas affiché avec les espaces....Il supprime toutes les nouvelles lignes et l'afficher dans la seule ligne ....Comment puis-je remédier à cela....
6 réponses
Vous devez utiliser <br /> pour la nouvelle ligne en html ou utilisez un <pre> la balise
pour ajouter à la solution D'Arun P Johny, si vous trouvez que votre <br /> les balises data-content les valeurs sont rendues en texte simple dans le contenu popover sur la page, Ajouter l'attribut supplémentaire data-html="true", comme ceci:
<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
data-html="true"
data-placement="bottom">
content
</a>
Être conscient que l'utilisation de data-html="true" introduit une vulnérabilité potentielle à attaques XSS; ne pas l'utiliser avec unsanitized la saisie de l'utilisateur.
Docs: https://getbootstrap.com/docs/3.3/javascript/#popovers-options
Vous pouvez utiliser white-space: pre-wrap; pour préserver les sauts de ligne dans le formatage. 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 ceci 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 pour votre aide, tout le monde!
nous avons réussi à utiliser le style de white-space: pre-wrap sauf que nous avons trouvé qui a ajouté des espaces supplémentaires à l'ensemble du pop-over. Au lieu de cela, nous avons ajouté ce style au popover-content.
.popover-content {
white-space: pre-wrap;
}
vous avez juste besoin d'ajouter des données-html= "true" à votre balise puis toutes vos balises html à l'intérieur du texte d'aide fonctionnent bien,