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

Question

我在网格中有一列长文本，应在网格中截断（以...结尾），但应在popover中显示整数。

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

弹出错误：

正确的弹出：

我以这种方式显示popover：

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

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

Answer 1

这是因为默认情况下，Twitter引导程序会将max-width属性应用于.popover框（max-width: 276px;）。

有两种选择：

1）通过将max-width重置为none来覆盖.popover { max-width: none; } ：

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

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

{{1}}

Answer 2

自2012年以来，自动换行的另一种解决方案是：

overflow-wrap:anywhere;

更多信息：Difference between overflow-wrap and word-break?

使用示例：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

edit：断词：断词已正式弃用；参见https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word