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

Share Improve this question Follow edited Dec 14, 2013 at 22:47 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Dec 13, 2013 at 21:35 user959974user959974 37922 gold badges99 silver badges2525 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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