0

我正在用 jQuery、HTML 和 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>

我的问题是弹出框被弹出框包装器的父级合并。虽然如果我添加一个长字符串，布局没有问题

AReallyLongLineWithoutASpace 正确显示

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

一条很长的线，带有无法正确显示的空间

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

较少的

div.popover-wrapper {
    position: relative;

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

非常感谢！

4

2 回答 2

2

添加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>
于 2013-01-28T08:58:05.873 回答
2

我想最简单的方法是使用white-space: nowrapon <div class="popvover">。

于 2013-01-28T08:58:29.437 回答