弹出式显示长文本，无空格

本文介绍了弹出式显示长文本，无空格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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; }