テキストが折り返しを停止するインライン要素はありますか？とても簡単？

Question

これらのインライン要素は、段落が折り返しを停止する、または、他の言葉で、インライン要素の前にテキストを配置し終えていないために引き起こしている理由を私は理解していない

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

：何かが直前に改行を引き起こしていますDIVはdisplay:inlineに設定してもdisplay:inline-blockに設定されています。私がDIVをSPANに変更しても動作しますが、DIVをdisplay:inlineまたはdisplay:inline-blockに設定した場合、SPANのように動作します。これは信じられないほど単純です！ ARGH！

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

あなたはblock level elements inside paragraphsを置くことはできません。 div要素はブロックレベル要素ですので、あなたの代わりにこれを書いていたかのように、ブラウザが作用：

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

これは、CSSについて話すとき、人々はブロック対インラインを議論する際に若干異なっています。段落要素の終わりは、CSSが適用される前に、ブラウザがHTMLを読み込んでいる間に決定されます。

一方、スパンはインライン要素であるため、動作します。

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>