div中的引导程序弹出文本重叠，没有空格

Question

HTML:

<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">

Popover在左边

Javascript：

$('*[data-id]').mouseenter(function(event) {
        var e=$(this);
        var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';



    e.popover({html:true,placement:'bottom', animation: false, 
        delay:   { show: 1500, hide: 100 }, content: content}).popover('show')
});

它可以正常工作，但前提是内容中的字符串包含空格。如果没有空格，文本将与第二个分区重叠。

JS Fiddle：http://jsfiddle.net/9Nt48/

我该怎么解决这个问题？

Answer 1

这是连续文本的问题，如果它似乎与其他div重叠，CSS会自动将其放在下一行，但当你不给它空格时，它没有太多选择，这是因为它不知道何时中断，所以你可以指定它，比如：

.popover-content {
    word-wrap:break-word;
}

由于您的列已经指定了宽度，如果div中的文本超过了宽度，请在该点将其打断。

DEMO

Answer 2

这是因为您的标记是错误的。Bootstrap中的row嵌套了您的列。您在其他列中嵌套了列，这是不正确的。

<div class="row">
  <div class="col-xs-12">
   Element1Element1 Element1Element1Element1Element1Element1Element1        Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
  </div>
</div>

如果要在工具提示中使用列，则只需要使用row和col-x-x类。因此，如果您显示的是简单的文本，则不必使用它们。

最后，如果您想要多行文本，只需一个p元素即可拆分文本。

注意：我不确定你是否可以在工具提示中使用网格。所以你最好使用没有列的简单文本。。。