如何防止 Bootstrap 在弹出窗口中自动换行

Question

我想用 Bootstrap 的弹出窗口添加工具提示，如下所示：

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

但是，Bootstrap 会在某些时候自动换行。我已经设置 html: true 并尝试添加一个 div 元素：

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

但还是断线了。是否可以避免自动换行并可能添加水平滚动条？我怎样才能指定工具提示区域的宽度？

Answer 1

你可以试试

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

white-space: nowrap 将强制所有内容在一行中。

Answer 2

您需要向 .popover-content class 添加一个 overflow-x: scroll;，并向每个 li 添加一个 white-space: nowrap。

https://jsfiddle.net/nrpe1m05/

如何防止 Bootstrap 在弹出窗口中自动换行

How to prevent Bootstrap from breaking lines automatically in popovers

html

twitter-bootstrap

popover