Почему элементы «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

Ответы на вопрос(4)

Вам необходимо использовать & quot; переполнение: скрытое & quot; в вашем элементе обертки

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

}

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

 14 апр. 2015 г., 21:35
Не совсем, поскольку содержание в & lt; div id = "headline" & gt; обрезается, согласно этой скрипке, раздвоенной от вашей:jsfiddle.net/vkaggbx8
Решение Вопроса

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

Дело в том, что#headline имеетwhite-space: normal не имеет никакого влияния на собственный макет. Элементwhite-space свойство влияет на макет его содержимого, а не на самого себя, даже если собственный блок элемента находится на уровне строки.

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

white-space Свойство CSS определяет, как обрабатываются пробелы внутри элемента. Чтобы слова ломались внутри себя, используйтеoverflow-wrap, word-breakили дефисы вместо. Теперь, если вы хотите ограничить это#wrapper чем вы можете ограничить свойство переполнения для div.If вы используете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;


}
 09 янв. 2018 г., 13:04
Но вы можете проверить мою скрипку, которая дает мне префект результат.
 Markus07 дек. 2017 г., 20:23
Это даетdifferent result, Заголовок помещается ниже изображения.

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

#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/

Ваш ответ на вопрос