内联元素导致文本停止换行？这么简单？

Question

http://jsfiddle.net/nicktheandroid/SsfpG/

我不明白为什么这些内联元素是导致段落停止换行，或者未完成在内联元素之前放置文本，换句话说：某些内容导致 DIV 设置为 display:inline-block 之前的换行符，甚至如果我只需将其设置为 display:inline 即可。如果我将 DIV 更改为 SPAN，那么它就可以工作，但是如果我将 DIV 设置为 display:inline 或 display:inline-block 那么它应该像这样工作一个SPAN..这应该非常简单！啊啊！

CSS

p {
    position:relative;
}

.trigger {
    display:inline-block;
    position:relative; 
}

.toolTip {
    display:none;
    position:absolute;
    top:0;
    left:0;

}

.triangle {
    display:inline;
    position:absolute;
    top:0;
    left:0;
}

HTML

<p>
    Hello this is an example paragraph and I love to talk about typography
    here on somewhere in between the this and now when I see all of the
    dogs running around the streets I'm like oh my goodness puppy what are
    you doing to the cats when  

    <div class="trigger">TRIGGER TRIGGER
        <div class="toolTip">
            This part is hidden right now, this will be the tooltip, for testing
            purposes it is hidden.
            <div class="triangle"></div>
        </div>
    </div>

    in that one movie and i'm
    like oh wow this is insane i dont know what to even think when I see
    all of the cats gone, okay i'm gonna stop now mr person there. I'm like 
    oh my goodness puppy what are
    you doing to the cats when you see them, now they're all vanished
    since you came to town puppy
</p>    

Answer 1

您不能将块级元素放入段落内。由于 div 是块级元素，因此浏览器的行为就好像您编写了以下内容：

<p>foo bar</p>
<div class="trigger">....

这与人们在谈论 CSS 时讨论内联与块略有不同。段落元素的结尾是在浏览器读取 HTML 时、应用 CSS 之前确定的。

另一方面，跨度是内联元素，因此可以工作。

Answer 2

将 div 替换为内联元素即可：

<span class="trigger">TRIGGER TRIGGER
    <span class="toolTip">
        This part is hidden right now, this will be the tooltip, for testing
        purposes it is hidden.
        <span class="triangle"></span>
    </span>
</span>