使用溢出时有一个奇怪的距离：隐藏

Question

这是我的演示

    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>

显示如下：

我很困惑为什么它有奇怪的差距，我不想要额外的差距，我该怎么办？

Answer 1

我最后的解决办法是在classdemo中添加font-size: 0，在span中添加一个font-size: 16px，像这样。原因是inline-block元素之间有一些间隙

<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

css

overflow