Auto resize with truncation for Buttons

How to solve this: I want to build a button with the width of the text , but if the available space is not enough the text should be truncated.

I try the following: Use size shrink and some custom CSS:
display: inline-block; width: auto; white-space: nowrap; text-overflow: ellipsis;
But this doesn’t work. If I set the Size to »Stretch« the truncation works, but the button will resize. If I set to shrink or manual the CSS will not work.

Any ideas?

:thinking: you could set the “Max Width” of the button.

The first one is only set to shrink and will grow with the text, the second one has a maximum width and shows the truncation (btw. we now support truncation natively, no need for CSS for this property):

truncation.zip (447.9 KB)

But the button should be resized together with window resize. And I don’t now why, the ellipsis will not show in my test.
Sorry, but can not upload my file, because I’m a new user.

If I understood correctly, the button should be set to shrink to the text size, but if the surrounding container gets smaller and the text won’t fit, the button should shrink down further and truncate the text.

You could do this by setting custom CSS flex: 0 1 auto; for the button.

truncate.zip (136.2 KB)

If you resize the element with the black border, the button will shrink and the text truncates.

2 Likes

Ok, this works. Thanks.

2 Likes