Bootstrap popover nasconde interruzioni di riga

Sto usando il codice html come segue per indicare la popover bootstrapBootstrap popover nasconde interruzioni di riga

<a data-original-title="" data-content="Hi, 
      Welcome ! 

      Sincerely, 
      programmer 
      " 
    data-placement="bottom"> 
    content 
</a>

E io inizializzato il popover come segue

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

Tutto funziona bene, ma il problema è la contenuto disponibile nel contenuto di dati non visualizzato con gli spazi .... Rimuove tutte le nuove linee e mostrarlo nella riga singola .... Come posso superare questo ....

fonte

2013-01-22 Aravind

Come detto Arun, avrete bisogno di usare l'HTML nel attributo del contenuto dei dati. Se è necessario utilizzare gli attributi all'interno degli attributi, è sufficiente utilizzare le virgolette singole. – isherwood

È necessario utilizzare <br /> per la nuova riga in html o utilizzare un tag <pre>

fonte

2013-01-22 13:30:40

+57

Non funziona senza 'data-html =" true "' – daVe

Grazie mille:) – mohammad

È possibile utilizzare white-space: pre-wrap; per mantenere interruzioni di riga nella formattazione. Non è necessario inserire manualmente gli elementi HTML.

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

fonte

2014-11-21 09:57:59 AncientSyntax

Questo è geniale e ha bisogno di più upvotes. Non ero a conoscenza dell'opzione "pre-wrap". – mcNux

Ciò preserva anche più spazi adiacenti all'interno del testo. 'white-space: pre-line' conserva solo le interruzioni di riga. – qbert220

Per aggiungere alla soluzione di Arun P Johny, se si scopre che i vostri <br /> tag nel valore data-content sono rendering come testo normale nel contenuto popover sulla pagina, aggiungere l'attributo aggiuntivo data-html="true", in questo modo:

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

Tenere presente che l'utilizzo di data-html="true" introduce una potenziale vulnerabilità a XSS attacks; non usarlo con input utente non criticato.

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

fonte

2015-01-06 14:52:42

sono riuscito ad ottenere questo lavoro con l'aggiunta di \ n per il mio testo popover dove voglio le linee di rompere e aggiungendo il seguente al mio foglio di stile:

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

Grazie per il aiuto, a tutti!

fonte

2015-07-22 07:41:26

Siamo riusciti a utilizzare lo stile di white-space: pre-wrap, tranne che abbiamo rilevato l'aggiunta di spazi bianchi extra all'intero pop-over. Invece abbiamo aggiunto questo stile al contenuto del popover.

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

fonte

2016-02-02 22:29:29 cmejet

Sì, è la risposta giusta! Grazie! – EstebanGarciaAlonso

Hai solo bisogno di aggiungere dati-html = "true" al tag, allora tutti i tag html all'interno l'aiuto di lavoro testo in caratteri piccoli,

fonte

2016-11-24 10:08:44

Bootstrap popover nasconde interruzioni di riga

risposta

Problemi correlati