How to accommodate long text in small arear like a tag or capsule?

Hi there,

I have the following issue in which some items inside a div are too long.:

As you can see see the one on the right is too long and breaks onto a new line.

I am wondering what the best approach fo overcome this is.

I have alsready set `font-size: 14px`` which is small, but still some items break.

I guess I have a few options:

  • Set the transformation to normal/not uppercase which would increase UX anyway, but some items are still too long
  • Reduce the actual content of the long items, but for some this isn’t ideal and won’t make sense to the user.
  • Have some kind of truncation where the word/content ends in a ... and then maybe animate/slide/marquee the rest of the content shown.

Does anyone have any ideas or tips on how to best get around this issue?

Thanks!

1 Like

Are the items user generated?

Cause if no, the answer is… use shorter items.

If yes, the answer is to make the container dynamic in size. How best you do that in your particular situation cannot be answered by looking at a picture.

No, they are categories that I have created. I’ve created most with SEO in mind, so shortening may conflict with that :confused:

Why don’t you simply increase the minimum height of the button to accommodate 2 lines of text by default and vertically align the text to the middle.

2 Likes

I guess I could. I wanted the look and feel to look like a “tag” or “capsule” though :confused:

You shortened Telecommunications to Telecoms, I dont see why shortening Organizations to Orgs would be any different. shrug

1 Like

Use an inner span and remove some letters on smaller screen.

Here is an example with both my suggestions in place.

You’ll have to open and close the window to see the effect. (It won’t look right in the embedded codepen window above as I haven’t catered for triple wraps etc.)

(You could use container queries instead of media queries if you wanted.)

In the end its all a choice but I would have done it much like my first example except that I would have the whole row as a flex or grid so that when one button wraps the other button does the same.

1 Like

Many thanks for the replies and examples :slight_smile:
I’ve decided to go with the flex route and have a flex-wrap style approach.

Thanks again!

1 Like