[解決済み] Twitter Bootstrapのツールチップに複数行を持たせるには?
2022-04-26 02:37:11
質問
現在、Bootstrapのtooltipプラグインで表示されるテキストを以下の関数で作成しています。どうして複数行のツールチップは
<br>
であり
\n
? 私は、リンクのタイトル属性にHTMLがない方が好きです。
動作内容
def tooltip(object)
tooltip = ""
object.each do |user|
tooltip += "#{user.identifier}" + "<br>"
end
return tooltip
end
欲しいもの
def tooltip(object)
tooltip = ""
object.each do |user|
tooltip += "#{user.identifier}" + "\n"
end
return tooltip
end
解決方法は?
を使用することができます。
white-space:pre-wrap
をツールチップに追加しました。これにより、ツールチップは新しい行を尊重するようになります。コンテナのデフォルトの最大幅より長い場合は、行は折り返されたままです。
.tooltip-inner {
white-space:pre-wrap;
}
http://jsfiddle.net/chad/TSZSL/52/
テキストを折り返さないようにしたい場合は、代わりに以下のようにしてください。
.tooltip-inner {
white-space:pre;
max-width:none;
}
http://jsfiddle.net/chad/TSZSL/53/
どちらも
\n
は、実際の改行でなければなりません。また、エンコードされた改行コードを使用することもできます。

を使うよりもさらに好ましくないでしょう。
<br>
's.
関連
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み】Twitter Bootstrapのツールチップを動的に作成された要素に結合するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
要素ツリー制御によるvueTreeテーブル
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
JavaScriptの配列共通メソッド解説
-
Vueのフィルタの説明
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] Bootstrapのツールチップの幅を調整する