如何使用 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

使用white-space:nowrap:

.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>

使用 flex:

.photos {
  display: flex;
  width: 400;
  height: 100;
  overflow-x: hidden;
}

.photos > div {
  flex:0 0 auto;
  width: 100px;
  height: 75px;
  border:solid 1px;
}

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

Answer 2

.photo {
    min-width: 200px;
    height: 75px;
    background-color: red;
    margin-left: 2rem;
}

.parent {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: blue;
  overflow:hidden;

}

它会隐藏溢出U只需要调整照片宽度的宽度

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

How to hide overflow of inline elements in a row using CSS?

html

css

inline

overflow