1. ホーム
  2. javascript

[解決済み] 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 は、実際の改行でなければなりません。また、エンコードされた改行コードを使用することもできます。 &#013; を使うよりもさらに好ましくないでしょう。 <br> 's.