内联元素导致文本停止换行？很简单？答案

【问题标题】：Inline elements causing the text to stop wrapping? So simple?内联元素导致文本停止换行？很简单？
【发布时间】：2011-10-30 12:16:42
【问题描述】：

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

我不明白为什么这些内联元素会导致段落停止换行，或者，没有完成将文本放置在内联元素之前，换句话说：在 DIV 设置为 @ 之前，某些东西导致了换行987654322@，即使我只是将其设置为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>

【问题讨论】：

标签： html css inline line-breaks

【解决方案1】：

你不能输入block level elements inside paragraphs。由于 div 是块级元素，因此浏览器的行为就像您编写了以下内容一样：

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

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

另一方面，span 是内联元素，所以可以。

【讨论】：

【解决方案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>

【讨论】：