文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用css在具有宽度的弹性容器内的跨度列表中显示三个点？

问如何使用css在具有宽度的弹性容器内的跨度列表中显示三个点？
EN

Stack Overflow用户

提问于 2022-02-20 08:37:42

回答 2查看 181关注 0票数 1

当容器没有空间时，如何添加三个点？

芯片必须显示在一行(显示:flex)。我希望容器宽度中不适合显示...。

section { width: 100px; display:flex;overflow:hidden;column-gap:5px;}
.chip { background: blue;color:#fff; }

<section>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
   <span class="chip">chip</span>
 </section>

我试着添加，但是它改变了.chip的宽度，我不想这样。

.chip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我还能做什么？

html

css

回答 2

Stack Overflow用户

发布于 2022-02-20 08:53:46

    section {
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100px;
      height: 1.2em;
      white-space: nowrap;
      color: #fff;
      background-color: black;
    }

    .chip {
      background: blue;
      color: #fff;
    }

  <section>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
    <span class="chip">chip</span>
  </section>

票数 0

Stack Overflow用户

发布于 2022-02-20 09:50:32

您应该将white-space: nowrap和text-overflow: ellipsis移动到section。还从display: flex中删除section

section {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chip {
  background: blue;
  color: #fff;
}

<section>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
  <span class="chip">chip</span>
</section>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71192663

复制

相似问题

问如何使用css在具有宽度的弹性容器内的跨度列表中显示三个点？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css在具有宽度的弹性容器内的跨度列表中显示三个点？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css在具有宽度的弹性容器内的跨度列表中显示三个点？
EN