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

容器中有许多

.story

div，它是一个网格项。 对于每个故事，我需要文本溢出：省略号，对于

#stories

div，我只需要水平滚动条

我对以下结构有一个建议：

全名

#主要部分{
边缘顶部：30px；
显示：网格；
网格模板列：2fr 1fr；
栅极间隙：30px；
}
#主要部分#故事{
高度：120px；
宽度：620px；
背景：白色；
边框：1px#dcdc实心；
边界半径：5px；
显示器：flex；
文本对齐：居中；
对齐项目：居中；
证明内容：开始；
左侧填充：10px；
溢出-x：滚动；
}
#主要部分#故事。故事{
高度：80px；
最大宽度：74px；
边界半径：50%；
右边距：10px；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
字体大小：0.7rem；
}
#主要章节#故事img{
高度：55px；
宽度：55px；
边界半径：50%；
}

我尝试了一个固定宽度的

#stories

div，但它只会使图像失真（由于重叠）。

---

最终的结果是，较长的名称有一个完美的圆形图像，较短的名称有一个扭曲的圆形边框，所有名称都被剪切（每个名称的开头和结尾都不可见），并且所有的

.story

div都被压缩在

#stories

div中（尝试了overflow-x，但它显示为禁用，没有任何区别）。

要使用文本溢出属性，文本元素必须设置为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;
}

---

#main section#stories

不需要。希望您在同一页面中没有任何

#else#stories

，对吗？ID是唯一的。只使用

#stories

还有，为什么您的HTML示例中缺少

？

#main section

是因为它包含了比我下面的

stories

更多的div没有这个规范，CSS也能正常工作。我已经修复了丢失的标签，谢谢！