Question

我正在构建一个jQuery，HTML＆amp; amp; CSS3。
你可以在这里查看：

http://themelandia.com/lib/pages/templates/popover.html

目前我将弹出窗口放在触发器后面触发器和弹出窗口包含div.popover-wrapper。

<div class="popover-wrapper">
    <a class="popover-trigger" href="#">The Trigger</a>
    <div class="popover">
        This is the popover!
    </div>
</div>

我的问题是popover-wrap的父级将popover get合并。虽然如果添加像

这样的长字符串，布局没有问题

AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly

以下字符串在每个新单词后都会换行。

非常长的行，空间无法正确显示

您也可以在上面的链接中看到这一点第一个弹出窗口正常工作，而第二个弹出窗口不是因为它被包裹在宽度较小的div中。

LESS

div.popover-wrapper {
    position: relative;

    div.popover {
        position: absolute;
        z-index: 200;
        width: auto;
    }
}

非常感谢！

Answer 1

添加word-break: break-all;我在您的网站上查看了此内容，并且确实有效。

<div class="popover show-animation shown" style="top: 44px; left: -38px; -webkit-transform-origin: 24px 0px; display: block; word-break: break-all;">
  AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly
                </div>

Answer 2

我想最简单的事情就是在white-space: nowrap上使用<div class="popvover">。

最佳div宽度忽略父级

LESS

2 个答案: