在保留填充和使用文本溢出的同时设置元素的最大宽度

Question

我正在使用 Bulma 的 tag 组件向我的网站添加一些标签。

在小屏幕的移动设备上，标签不适合放在下一行，所以我试图在带有省略号的标签元素上设置最大宽度。我的目标是让标签在放不下时像这样显示，同时仍然保留元素上的填充，如下所示：

但是，当我尝试设置这些 CSS 属性时：

.tag-with-counts .tag {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

我得到的是这样的东西。文本不从头开始，不保留填充，不出现省略号：

这是一个显示问题的 JSFiddle：https://jsfiddle.net/Ljb2a0h7/1/

如何使标签显示为第一张图片所示？

Answer 1

text-overflow属性仅适用于block containers。

您的标签显示是 inline-flex，它会生成一个 flex container。这就是 text-overflow 没有任何效果的原因。

Setting max-width on element while preserving padding and using text-overflow