如何使Twitter引导工具提示有多行?

  • 问题:
  • 我目前正在使用下面的函数来创建文本,这些文本将使用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

  • 答案:
  • 你可以用白色-空间:预环绕。这将使工具提示显示新行。如果行的长度超过容器的默认最大宽度,则仍将换行

    .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/

    这两种方法都不适用于html中的\n,它们实际上必须是实际的换行符。或者,您可以使用编码的换行符,但这可能比使用<;br>;更不可取

如何使Twitter引导工具提示有多行?

  • 问题:
  • 我目前正在使用下面的函数来创建文本,这些文本将使用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

  • 答案:
  • 你可以用白色-空间:预环绕。这将使工具提示显示新行。如果行的长度超过容器的默认最大宽度,则仍将换行

    .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/

    实际上,这两行代码都不能使用新代码。或者,您可以使用编码的换行符,但这可能比使用<;br>;更不可取