由于空白，内联块不起作用：nowrap;

Question

我目前正在尝试为学校项目制作内嵌文章。 文本溢出，我不知道为什么，但我有一个想法。 当我删除空格时： nowrap; - 文本按预期进行，填充粉红色框，但随后内联不再起作用。

有什么想法吗？我附上了一个codepen。

http://codepen.io/torarne_n/pen/PwQBmx

.slider {
width: 1225px;
height: 600px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
margin-bottom: 10px;
}

.slides {
height:500px;
width:1225px;
display: inline-block;
background-color: aqua;
}

.intro-image {
height: auto;
width: auto;
display: inline-block;
background-color: pink;
}

.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
} 

Answer 1

问题在于内部元素继承了nowrap。只需在内部元素上将其恢复正常即可：

.intro-text {
    height: auto;
    width: 300px;
    display: inline-block;
    background-color: fuchsia;
    white-space: normal;
}