Текст горизонтально переполнен в следующую строку inline div

Question

Возможно ли переполнение текста по горизонтали в (и над) следующий div при отображении множества div в строке?

Пример:

HTML:

<div class="div1">I want the text to overflow into the red box</div> 
<div class="div2"></div> 

CSS:

div{ 
     float:left; 
     display:inline; 
     width: 200px; 
     height: 18px; } 

    .div1{ 
     background-color: grey; } 

    .div2{ 
     background-color: red; } 

См jsfiddle: http://jsfiddle.net/lars95/H7KvG/6/

Answer 1

Да, добавьте

.div1 { 
    white-space: nowrap; 
    position: relative; 
} 

Если вы хотите, чтобы дать div2 позицию относительно а, убедитесь, что г-индекс див1 выше, то г-индекс div2.

demo here

Answer 2

Добавить position: relative и white-space: nowrap; к вашему div1. Укажите, что текст в пунктах никогда не завернуть:

.div1{ 
     background-color: grey; 
     white-space: nowrap; 
     position: relative; 
     } 

Answer 3

Есть несколько вещей, чтобы отметить здесь

1. white-space: nowrap; - это используется, когда вы хотите, параграфы никогда не обернуть
2. положить ваш контент внутри <p>. вы будете иметь гораздо больший контроль над всем, когда вы это делаете, как этот
3. overflow visible - так как ваш <p> больше, то контейнер <div> то вам необходимо разрешить контейнер для отображения, что находится внутри
4. position relative + z-index. вам нужно это, чтобы первый контейнер находился поверх второго. позволяя отображать содержимое внутри.
5. вам не нужно display: inline. плавал элементы block

так что ваш код будет:

<div class="div1"> 
    <p>I want the text to overflow into the red box</p> 
</div> 
<div class="div2"></div> 

и CSS:

div{ 
    float:left; 
    width: 200px; 
    height: 18px; 
} 

p { 
    margin: 0; 
    white-space: nowrap; 
} 

.div1{ 
    background-color: grey; 
    overflow: visible; 
    position: relative; 
    z-index: 1; 
} 

.div2{ 
    background-color: red; 
} 

обновленный fidle: http://jsfiddle.net/H7KvG/8/