html - 使缩略图水平滚动而不使用 nowrap

Question

我正在尝试使用 CSS 进行以下设计:

想法是让它在全 Angular 容器中水平滚动。

我在包装器中添加了 white-space: nowrap，但由于文本太长，它会从容器中消失。这是问题的屏幕截图:

请查看实时 jsFiddle here

HTML:

<div class="box">
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
</div>

CSS:

.box {
  white-space: nowrap;
  height: 300px;
  overflow-x: scroll;
  width: 100%;
  margin-top: 30px;
}
.box .box-item {
  background: #eeeeee;
  margin: 0 10px;
  transition: background 0.4s ease;
  display: inline-block;
  white-space: nowrap;
  float: none;
}

PS:我阅读了有关使用 display:table 和 table-cell 的文章，有什么想法可以用它们来实现吗？

谢谢，

Answer 1

css被内部元素继承。您可以通过添加诸如

之类的规则来为 child 指定合适的 css

.content {
    white-space: normal;
    padding: 0px 10px;
}

In your fiddle