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>

私の問題は、ポップオーバー ゲットがポップオーバー ラッパーの親によってマージされることです。のように長い文字列を追加してもレイアウトに問題はありませんが、

AReallyLongLineWithoutASpaceWhichGetsDisplayed正しく

次の文字列は、新しい単語ごとに改行されます。

正しく表示されないスペースのある非常に長い行

これも上記のリンクで見ることができます。
最初のポップオーバーは正しく機能していますが、2 番目のポップオーバーはdiv幅の狭い でラップされているため機能していません。

以下

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: nowrap最も簡単なのはonを使用することだと思い<div class="popvover">ます。

于 2013-01-28T08:58:29.437 に答える