web-dev-qa-db-ja.com

Bootstrap Popoverは改行を隠します

bootstrap popoverを表示するために次のようにHTMLコードを使用しています

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

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

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

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

すべて正常に動作しますが、問題はデータコンテンツで利用可能なコンテンツがスペースで表示されないことです。..新しい行をすべて削除し、1行で表示します。

htmltwitter-bootstrappopover
47
Aravindhan

Htmlの新しい行に<br />を使用するか、<pre>タグを使用する必要があります

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

77
Arun P Johny

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>

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

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

32
Jon Schneider

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

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

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

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

みんな、助けてくれてありがとう！

7
Johann Marx

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

1
Karvan

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

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