Popover for long text without spaces

Question

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

Incorrect popover:

Correct popover:

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?

Answer 1

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

There are two options:

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

.popover {
    max-width: none;
}

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

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

Answer 2

Since 2012 another solution for word-wrap is:

overflow-wrap:anywhere;

More information: Difference between overflow-wrap and word-break?

Examples of use: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

edit: word-break: break-word is officially deprecated; see https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word