Question

这是一个非常直接的问题，一直让我感到疯狂。所以我想让省略号在span元素内的button元素上工作。

省略号有效，我可以看到3个点，但是当我应用这个代码时，我的按钮会获得＆＃39;宽度为2像素，元素的整个布局都消失了。

这是我的HTML结构：

<button type="button">
   <div>
         <span class="ellipsis-20">Offer</span>
         <span class="ellipsis-20"><%= promotion.promotion_list %></span>
   </div>
</button>

我的span的CSS：

.ellipsis-20 {
  .multiLineEllipsis(20px, 1);
}

.multiLineEllipsis(@lineHeight: 20px, @lineCount: 1) {
  width: 100%;

  line-height: @lineHeight;
  max-height: @lineHeight * @lineCount;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

如果我删除了white-space: nowrap;，则额外的宽度消失了，但我看不到3个点。我还尝试添加calc(100% - 2px)，我得到了相同的结果。有没有人知道修复，特别是对于可以指向正确方向的safari？

编辑：我的span也有display: inline-block

Safari：白色空间：nowrap使我的容器宽度增加2px

0 个答案: