How to prevent Bootstrap from breaking lines automatically in popovers

Question

I want to add a tooltip with Bootstrap's popover like this:

<ul>
     <li>Entry 1 ....................................................................</li>
     <li>Entry 2 ....................................................................</li>
     <li>Entry 3 ....................................................................</li>
</ul>

However, Bootstrap will break the line automatically at some point. I have set html: true and tried to add a div element:

<div style="word-break: keep-all>
<ul>
     <li style="word-break: keep-all"></li>
</ul>
</div>

but it still breaks the line. Is it possible to avoid automatically line breaks and maybe add a horizontal scrollbar instead? How can I even specify the width of the tooltip area?

score 0 · Answer 1 · edited Aug 31 '20 at 10:42

0

You can try

<ul>
   <li style="white-space: nowrap"></li> 
</ul>

white-space: nowrap will force the content to be all in one line.

edited Aug 31 '20 at 10:42

Dharman

30,962
25
85
135

answered Aug 31 '20 at 10:36

Carol B.

21
5

score 0 · Accepted Answer · answered Aug 31 '20 at 10:38

0

You'd need to add an overflow-x: scroll; to your .popover-content class, as well as a white-space: nowrap to each li.

https://jsfiddle.net/nrpe1m05/

answered Aug 31 '20 at 10:38

Alexandre Elshobokshy

10,720
6
27
57

For me it only worked with popover-body as described here: https://stackoverflow.com/a/50915309/1221159 – Baradé Aug 31 '20 at 12:37
@Baradé it must depend on the version you're using, glad I was able to help! – Alexandre Elshobokshy Aug 31 '20 at 12:38

How to prevent Bootstrap from breaking lines automatically in popovers

2 Answers2