javascript - 没有空格的长文本的弹出窗口

Question

我在网格中的一列长文本应该在网格中 chop (以...结尾)但应该在弹出窗口中显示完整。

当我的文本中有空格时，弹出窗口正确显示。对于没有空格的文本，弹出窗口显示不正确。请参阅下面的示例

不正确的弹出框:

正确的弹出框:

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

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

我应该如何修改代码以正确显示没有空格的长文本？

Answer 1

那是因为 Twitter Bootstrap 应用了一个 max-width默认情况下将属性添加到 .popover 框(即 max-width: 276px;)。

有两种选择:

1) 通过将 max-width 重置为 none 覆盖 max-width 如下:

.popover {
    max-width: none;
}

2) 或者使用 word-wrap: break-word;弹出内容框的 CSS 声明为:

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