I am creating a popover for a div using Twitter Bootstrap, but the text is too long and it seems to exceed the maximum width of the popover.

I want to show ... at the end of the text so I tried to style <li> with text-overflow:ellipsis;, but that didn't work.

javascript:

$(div).popover({
  placement : 'right',
  title : function (){
    return '<span class="title">Title</span>';
  },
  content: function (){
    return '<div class="body"><ul>'
           + '<li>This_is_a_long_long_long_long_long_long_long_long_long_long_long_long_long_text</li>'
            + '</ul></div>'
   },
   container : 'body',
   html : 'true'
 });

How can I wrap the text properly?

I am creating a popover for a div using Twitter Bootstrap, but the text is too long and it seems to exceed the maximum width of the popover.

I want to show ... at the end of the text so I tried to style <li> with text-overflow:ellipsis;, but that didn't work.

javascript:

$(div).popover({
  placement : 'right',
  title : function (){
    return '<span class="title">Title</span>';
  },
  content: function (){
    return '<div class="body"><ul>'
           + '<li>This_is_a_long_long_long_long_long_long_long_long_long_long_long_long_long_text</li>'
            + '</ul></div>'
   },
   container : 'body',
   html : 'true'
 });

How can I wrap the text properly?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Add overflow:hidden to the popover class? – jraede Commented Dec 13, 2013 at 21:37
• Using Bootstrap 2 or 3? – Andrew Commented Dec 13, 2013 at 21:44

2 Answers 2

http://jsfiddle/isherwood/W6a3B

.popover-content, .popover-content .body {
    width: 100%;
}
.popover-content li {
    overflow: hidden;
    text-overflow: ellipsis;
}

My text on the page had the '...' and I wanted the popover to show the full text (which seems more useful than truncating the popover). To do that just override the popover-content style:

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