How to display three dot in list of span inside flex container with width using css?-CodePudding

How to add three dots when has no space left according the container?

The chips are must display in one row (display:flex). and I want what is not fit into the container width to display ....

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

<section>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
   <span >chip</span>
 </section>

I try to add, but it change the width of the .chip and I don't want that.

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

What else can I do?

CodePudding user response：

Add a fixed width to achieve your desired results. I have edited this answer to reflect your code..

    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 >chip</span>
    <span >chip</span>
    <span >chip</span>
    <span >chip</span>
    <span >chip</span>
    <span >chip</span>
    <span >chip</span>
    <span >chip</span>
  </section>

Here is a solution to your problem. But if someone is trying to help you and you downvote his solution. There high chances they may not continue to help.

CodePudding user response：

You should move white-space: nowrap and text-overflow: ellipsis to section. Also remove display: flex from section:

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

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

<section>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
  <span >chip</span>
</section>