如何使Twitter的 bootstrap工具有多行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

我目前使用下面的函数来创建将使用bootstrap的工具提示插件显示的文本。多行工具提示如何处理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在html中,它们必须是实际的换行符。或者,可以使用编码的换行符&#013;。

用户回答回答于

可以使用html属性:http : //jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

扫码关注云+社区