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

debugcn 发表于 Dev

卡达米尔

.story容器内部有很多div，这是一个网格项。对于每个故事，我都需要文本溢出：省略号；对于#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，但显示为已禁用，没有区别）。

亚尔奇·基利奇（Yalcin Kilic）

要使用text-overflow属性，必须将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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。