Search code examples
htmlcssbulma

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

I'm using Bulma's tag component to add some tags to my website.

On mobile devices with small screens, the tags don't fit and go on the next line, and so I'm trying to set a max-width on the tag elements with an ellipsis. My goal is to have the tags appear like this when they can't fit, while still preserving the padding on the element, like so:

enter image description here

However, when I try to set these CSS properties:

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

I get something like this instead. The text does not start from the beginning, the padding isn't preserved, and ellipsis doesn't appear:

enter image description here

Here's a JSFiddle showing the problem: https://jsfiddle.net/Ljb2a0h7/1/

How can I make the tag appear as shown in the first image?

Solution

  • The text-overflow property applies only to block containers.

    https://drafts.csswg.org/css-overflow-4/#text-overflow

    The display of your tag is inline-flex which generates a flex container. That's why text-overflow is not having any effect.