如何使用CSS隐藏行中的内联元素溢出？

Question

我有多张照片需要彼此连续显示。但是，如果照片的长度大于屏幕宽度，我希望隐藏多余的照片（也可以部分隐藏照片），而不是将它们堆叠并自动移动到下一行。有没有办法使用CSS做到这一点？这是我到目前为止尝试过的（不正确）。

<div class="parent">
    <div class="photo">Photo 1</div>
    <div class="photo">Photo 2</div>
    <div class="photo">Photo 3</div>
    <div class="photo">Photo 4</div>
    <div class="photo">Photo 5</div>
    <div class="photo">Photo 6</div>
</div>

.photo {
    display: inline;
    width: 100px;
    height: 75px;
}

.parent {
  width:400;
  height:100;
  overflow-x:hidden;
}

Answer 1

这里您是：

.parent {
  width: 400;
  height: 100;
  white-space: nowrap;
  overflow-x: hidden;
}

.photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  background: #0f03
}

<div class="parent">
  <div class="photo">Photo 1</div>
  <div class="photo">Photo 2</div>
  <div class="photo">Photo 3</div>
  <div class="photo">Photo 4</div>
  <div class="photo">Photo 5</div>
  <div class="photo">Photo 6</div>
</div>