html - not - Bootstrap popover oculta los saltos de línea

tooltip bootstrap css

Question

Estoy usando el código html de la siguiente manera para mostrar el popover bootstrap

<a data-original-title="" data-content="Hi,
Welcome !
Sincerely,
programmer
"
data-placement="bottom">
content
</a>

Y he inicializado el popover de la siguiente manera

$(this).popover({
html:true
});

Todo funciona bien, pero el problema es que el contenido disponible en el contenido de datos no se muestra con los espacios ... Elimina todas las líneas nuevas y las muestra en una sola línea ... ¿Cómo puedo superar esto ...?

Answer 1

Debes usar <br /> para una línea nueva en html o usar una etiqueta <pre>

Answer 2

Logré hacer que esto funcionara agregando / n a mi texto de popover donde quiero que las líneas se rompan y añadiendo lo siguiente a mi hoja de estilo:

.popover {
white-space: pre-line;
}

Gracias por la ayuda, ¡a todos!

Answer 3

Nos las arreglamos para usar el estilo de espacio en blanco: pre-wrap, excepto que encontramos que se añadieron espacios en blanco adicionales a todo el pop-over. En cambio, agregamos este estilo al contenido de popover.

.popover-content {
white-space: pre-wrap;
}

Answer 4

Para agregar a la solución de Arun P Johny, si encuentra que sus etiquetas <br /> en el valor del data-content se representan como texto sin formato en el contenido de popover en la página, agregue el atributo adicional data-html="true" , al igual que:

<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
data-html="true"
data-placement="bottom">
content
</a>

Tenga en cuenta que el uso de data-html="true" introduce una vulnerabilidad potencial a los ataques XSS ; no lo use con entradas de usuario no optimizadas.

Documentos: https://getbootstrap.com/docs/3.3/javascript/#popovers-options

Answer 5

Puedes usar white-space: pre-wrap; para preservar los saltos de línea en el formateo. No es necesario insertar elementos html manualmente.

.popover {
white-space: pre-wrap;
}

Answer 6

Solo necesita agregar data-html = "true" a su etiqueta, entonces todas sus etiquetas html dentro del texto de ayuda funcionan bien,