CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Piotr0123456
Piotr0123456

Reputation: 648

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

Incorrect popover:

Incorrect popover

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

Upvotes: 9

Views: 13695

Answers (2)

robotu
robotu

Reputation: 213

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

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99544

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

Upvotes: 26

Related Questions