如何使Twitter引导工具提示有多行？ [英] How to make Twitter bootstrap tooltips have multiple lines?

问题描述

我目前使用下面的函数来创建将使用bootstrap的tooltip插件显示的文本。如何使多线工具提示仅适用于< br> ，而不是 \\\
？我更喜欢在我的链接的标题属性没有任何html。

有什么作用

  def tooltip（object）
 tooltip =
 object.each do | user | 
 tooltip + =＃{user.identifier}+< br> 
 end 
 return tooltip 
 end 
  

p>

  def tooltip（object）
 tooltip =
 object.each do | user | 
 tooltip + =＃{user.identifier}+\\\

 end 
 return tooltip 
 end 
  pre> 
 
解决方案
您可以使用 white-space：pre-wrap 工具提示。这将使工具提示遵循新行。如果长度超过容器的默认最大宽度，则行仍会换行。
  .tooltip-inner {
空白区：预包装; 
} 
  
 http://jsfiddle.net/chad/TSZSL/52/  
 
 
 
如果您要防止文字包装，请执行以下操作
  .tooltip-inner {
 white-space：pre; 
 max-width：none; 
} 
  
 http://jsfiddle.net/chad/TSZSL/53/  
 
 
 
这两种方法都不适用于 \\\
 在html中，它们必须实际上是实际的换行符。或者，您可以使用编码的换行符&＃013; ，但这可能不如使用< br> 。
 
I am currently using the below function to create text that will be displayed using bootstrap's tooltip plugin. How come multiline tooltips only works with <br> and not \n? I prefer that there is not any html in my links' title attributes. 

What works
def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end
What I want
def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

解决方案
You can use white-space:pre-wrap on the tooltip. This will make the tooltip respect new lines. Lines will still wrap if they are longer than the default max-width of the container.
.tooltip-inner {
    white-space:pre-wrap;
}
http://jsfiddle.net/chad/TSZSL/52/

If you want to prevent text from wrapping, do the following instead.
.tooltip-inner {
    white-space:pre;
    max-width:none;
}
http://jsfiddle.net/chad/TSZSL/53/

Neither of these will work with a \n in the html, they must actually be actual newlines. Alternatively, you can use encoded newlines &#013;, but that's probably even less desirable than using <br>'s.

                        
这篇关于如何使Twitter引导工具提示有多行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！