There is an strange distance when using overflow: hidden

Question

Here is my demo

    span {
      display: inline-block;
      background: red;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 30px
    }

    .demo {
      width: 90px;
    }

<html lang="en">
  <body>
    <div class="demo">
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
    </div>
  </body>
</html>

it shows as follow:

I'm confused why it has the strange gap, and I don't want the extra gap, how can I do?

Set border:1px solid black; on the span to see what’s going on. With overflow hidden on the span makes no sense, it makes sense if you put it on a div, so you would only see 1 row at 100px. — estinamir, Mar 02 '20 at 04:54

MuYunyun · Accepted Answer · 2020-03-04T15:49:30.253

My final solve is to add font-size: 0 in the class demo and add a font-size: 16px in span like this. The reason is that there is some gap between the inline-block element.

<html lang="en">
  <style>
    span {
      display: inline-block;
      background: red;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 30px;
      font-size: 16px;
    }

    .demo {
      width: 90px;
      font-size: 0
    }
  </style>
  <body>
    <div class="demo">
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
      <span>testtest</span>
    </div>
  </body>
</html>

There is an strange distance when using overflow: hidden

1 Answers1