65

ブートストラップポップオーバーを表示するために、次のHTMLコードを使用しています

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

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

そして、私は次のようにポップオーバーを初期化しました

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

すべて正常に動作しますが、問題はデータで利用可能なコンテンツです-スペースで表示されないコンテンツ....すべての新しい行が削除され、1行で表示されます....これを克服するにはどうすればよいですか...

4

6 に答える 6

112

<br/>HTMLの改行に使用するか、<pre>タグを使用する必要があります

data-html="true"属性が存在することを確認してください。

于 2013-01-22T13:30:40.590 に答える
41

white-space: pre-wrap;書式設定で改行を保持するために使用できます。手動でhtml要素を挿入する必要はありません。

.popover {
    white-space: pre-wrap;    
}
于 2014-11-21T09:57:59.790 に答える
36

Arun P Johnyのソリューションに追加するに<br />は、値のタグがページのポップオーバーコンテンツでプレーンテキストとしてレンダリングされていることがわかった場合は、次のようdata-contentに追加の属性を追加します。data-html="true"

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

を使用すると、 XSS攻撃data-html="true"に潜在的な脆弱性が生じることに注意してください。消毒されていないユーザー入力で使用しないでください。

ドキュメント：https ：//getbootstrap.com/docs/3.3/javascript/#popovers-options

于 2015-01-06T14:52:42.223 に答える
10

行を分割したいポップオーバーテキストに\nを追加し、スタイルシートに次を追加することで、これを機能させることができました。

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

皆さん、助けてくれてありがとう！

于 2015-07-22T07:41:26.753 に答える
2

ポップオーバー全体に余分な空白が追加されていることがわかった場合を除いて、空白のスタイルを使用することができました。代わりに、このスタイルをポップオーバーコンテンツに追加しました。

.popover-content {
    white-space: pre-wrap;
}
于 2016-02-02T22:29:29.010 に答える
1

タグにdata-html="true"を追加するだけで、ヘルプテキスト内のすべてのhtmlタグが正常に機能します。

于 2016-11-24T10:08:44.597 に答える