要使用text overflow属性，必须将text元素设置为overflow：用某种width属性隐藏。我只更新了你的css的重要部分：
作为网格项的容器中有许多.storydiv。对于每个故事，我需要文本溢出：省略号，对于#storiesdiv，我只需要水平滚动条。
我有以下结构：
<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%;
}
我尝试过为#storiesdiv设置固定宽度，但它只会使图像失真(由于重叠(。最终的结果是，较长的名称具有完全圆形的图像，较短的名称具有扭曲的圆形边界，所有名称都被剪切(每个名称的开头和结尾都不可见(，并且所有.storydiv都被压缩在#storiesdiv中(尝试过overflow-x，但它显示为禁用，没有任何区别(。
#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;
}