Встроенные элементы, вызывающие прекращение переноса текста? Так просто? - PullRequest
Новая
       5

Встроенные элементы, вызывающие прекращение переноса текста? Так просто?

0 голосов
/ 30 октября 2011

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

Я не понимаю, почему эти встроенные элементы заставляют абзац прекращать перенос или, другими словами, не заканчивают размещать текст перед встроенным элементом: что-то вызывает строкуперерыв перед тем, как DIV установится на display:inline-block, даже если я просто установлю его на display:inline.Если я изменю 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>

Ответы [ 2 ]

3 голосов
/ 30 октября 2011

Нельзя помещать элементы уровня блока внутри абзацев . Так как div - это элементы уровня блока, браузер работает так, как если бы вы написали это: 

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

Это немного отличается от того, когда люди обсуждают inline против блока, когда говорят о CSS. Конец элемента абзаца определяется, когда браузер читает HTML, до применения CSS.

С другой стороны, span являются встроенными элементами, так что это работает.

0 голосов
/ 30 октября 2011

Замена ваших элементов 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>
...