web-dev-qa-db-fra.com

Bootstrap popover masque les sauts de ligne

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 ....

htmltwitter-bootstrappopover
47
Aravindhan

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.

77
Arun P Johny

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

32
Jon Schneider

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;    
}
31
AncientSyntax

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!

7
Johann Marx

Il vous suffit d'ajouter data-html = "true" à votre balise, puis toutes vos balises html à l'intérieur du texte d'aide fonctionnent correctement,

1
Karvan

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;
}
1
cmejet