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

Question

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

这个想法是让它在全宽容器中水平滚动。

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

请在此处查看实时 jsFiddle

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

The css is inherited by the inner elements. You can specify fitting css for the children by adding a rule such as

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

In your fiddle