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

问题描述

这是我的演示

    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>

它显示如下：

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

标签： cssoverflow

我的最终解决方案是添加font-size: 0类demo并像这样添加一个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>

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

问题描述

解决方案

推荐阅读