內聯元素導致文本停止包裝？很簡單？

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>

來源

2011-10-30 android.nick

你不能把block level elements inside paragraphs。由於div的是塊級元素，瀏覽器行爲，如果你這樣寫的，而不是：

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

這是當人們談論CSS當VS塊討論直列略有不同。在應用CSS之前，瀏覽器正在讀取HTML時確定段落元素的結尾。

另一方面，跨度是內聯元素，所以工作。

來源

2011-10-30 12:22:03 Douglas

與內聯元素替換您的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>

來源

2011-10-30 12:24:21 Leo

內聯元素導致文本停止包裝？很簡單？

回答

相關問題