CSS 溢出和文本溢出不起作用？

Question

容器里面有很多.story divs，是一个grid item。对于每个故事，我都需要文本溢出：省略号，对于 #stories div，我只需要水平滚动条。

我有以下结构：

<div class="container" id="main-section">
  <div id="stories">
    <div class="story">
      <img src="./img/stories/story1-shai.jpg" alt="story" />
      <p>Full name</p>
    </div>
  </div>
</div>

#main-section {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
}

#main-section #stories {
  height: 120px;
  width: 620px;
  background: white;
  border: 1px #dcdcdc solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  overflow-x: scroll;
}

#main-section #stories .story {
  height: 80px;
  max-width: 74px;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.7rem;
}

#main-section #stories img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
}

我试过 #stories div 的固定宽度，但它只会使图像失真（由于重叠）。最终结果是较长的名称具有完美的圆形图像，较短的名称具有扭曲的圆形边框，所有名称都被剪切（每个名称的开头和结尾都不可见）并且所有 .story divs 在 #stories div 中被压缩（尝试过 overflow-x 但它显示为禁用并且没有区别）。

Answer 1

要使用 text-overflow 属性，必须使用某种 width-property 将 text-element 设置为 overflow:hidden。我只更新了你 css:

的重要部分

#main-section {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
}
#stories {
  height: 120px;
  width: 620px;
  background: white;
  border: 1px #dcdcdc solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  overflow-x: scroll;
}
#stories .story {
  height: 80px;
  max-width: 74px;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.7rem;
}
#stories img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
}

.story p {
  width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS 溢出和文本溢出不起作用？

CSS overflow and text-overflow not working?

html

css

overflow