html - 由于空白 : nowrap;，内联 block 无法正常工作

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;
}