弹出式显示长文本，无空格 [英] Popover for long text without spaces

问题描述

我在网格中有一列长文本，应该在网格中将其截断（以...结尾），但在弹出窗口中应显示整个文本。

I have in grid in one column long text which should be truncated in grid (ends with ...) but should show whole in 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

错误的弹出框：

正确的弹出框：

我以这种方式显示弹出窗口：

I'm displaying popover in that way:

<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?

推荐答案

这是因为Twitter引导程序应用了 max-width 属性默认为 .popover 框（哪个是最大宽度：276px; ）。

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

有两种选择：

1）通过将最大宽度重置为 none as：

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

.popover {
    max-width: none;
}

2）或使用word-wrap：break-word; 弹出框内容框的CSS声明为：

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

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

这篇关于弹出式显示长文本，无空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！