弹出用于没有空格的长文本

I have in grid in one column long text which should be truncated in grid (ends with ...) but should show whole in popover.

我在网格中有一列长文本,应该在网格中截断(以...结尾),但应该在popover中显示整数。

The popover is displaying correctly when there are spaces in my text. For text with no spaces popover is displaying incorrectly. See examples below

当文本中有空格时,弹出窗口正确显示。对于没有空格的文本,弹出窗口显示不正确。见下面的例子

Incorrect popover:

弹出用于没有空格的长文本

Correct popover:

弹出用于没有空格的长文本

I'm displaying popover in that way:

我正以这种方式展示popover:

<div data-toggle="popover" rel="popover"
    data-container="body" data-content="My_test_in_popover">
    My_text_with_...
</div>

How should I modified code to display popover correctly for long text with no spaces?

如何修改代码以正确显示没有空格的长文本的弹出窗口?

1 个解决方案

That's because Twitter bootstrap applies a max-width property to the .popover box by default (Which is max-width: 276px;).

这是因为Twitter引导默认情况下将最大宽度属性应用于.popover框(最大宽度:276px;)。

There are two options:

有两种选择:

1) Override the max-width by reseting that to none as:

1)通过将最大宽度重置为无来覆盖最大宽度:

.popover {
    max-width: none;
}

2) Or use word-wrap: break-word; CSS declaration for the popover content box as:

2)或使用自动换行:break-word;弹出框内容框的CSS声明为:

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

That's because Twitter bootstrap applies a max-width property to the .popover box by default (Which is max-width: 276px;).

这是因为Twitter引导默认情况下将最大宽度属性应用于.popover框(最大宽度:276px;)。

There are two options:

有两种选择:

1) Override the max-width by reseting that to none as:

1)通过将最大宽度重置为无来覆盖最大宽度:

.popover {
    max-width: none;
}

2) Or use word-wrap: break-word; CSS declaration for the popover content box as:

2)或使用自动换行:break-word;弹出框内容框的CSS声明为:

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