Почему элементы "inline-block" в переполнении div "nowrap"?

Следующий код заставляет #headline переполнять #wrapper, и я не понимаю, почему это происходит.

HTML:

<div id="wrapper">
    <div id="logo">
        <img src="/test.png">
    </div>
    <div id="headline">
        <h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #</h1>
    </div>
</div>

CSS

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

Пример кода: http://jsfiddle.net/XjstZ/21/ или http://tinkerbin.com/XvSAEfrK

Ответ 1

Как следует из названия, встроенные блоки участвуют во встроенном макете, что означает, что они действуют так же, как встроенные элементы и текст. white-space: nowrap вызывает переполнение текста в элементе, предотвращая его обертывание; то же самое происходит с встроенными блоками. Это просто.

Тот факт, что #headline имеет white-space: normal, не влияет на его собственный макет. Свойство element white-space влияет на макет его содержимого, а не на себя, даже если поле собственного элемента является встроенным.

Ответ 2

Вам нужно использовать "overflow: hidden" в вашем элементе-оболочке

#wrapper {
background: #fea;
white-space: nowrap;
width: 50%;
overflow: hidden;

}

Я обновил ваш образец в jsfiddle http://jsfiddle.net/XjstZ/72/

Ответ 3

Установка ширины элемента заголовка устраняет проблему.

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

Он реагирует, если оба обертки изображения и изображение имеют свою максимальную ширину.

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/

Ответ 4

Этот перенос содержимого из-за white-space: normal;.

Свойство CSS белого пространства определяет, как обрабатывается пробел внутри элемента. Чтобы слова сломались внутри себя, используйте overflow-wrap, word-break или дефисы вместо этого. Теперь, если вы хотите ограничить это с помощью #wrapper, вы можете ограничить свойство переполнения для div. Если вы используете white-space: nowrap; для div, очистите текст переполнения и покажите div в одной строке (ROW).

#wrapper {
    background: #fea;
    width: 50%;
    overflow: hidden;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;


}