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

Question

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

在具有小屏幕的移动设备上，标签不适合并进入下一行，因此我尝试使用省略号在标签元素上设置最大宽度。我的目标是让标签在不适合时显示为这样，同时仍保留元素上的填充，如下所示：

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

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

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

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

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

标签： htmlcssbulma

Answer 1

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

https://drafts.c​​sswg.org/css-overflow-4/#text-overflow

您的标签的显示会inline-flex生成一个flex container. 这就是为什么text-overflow没有任何效果。