# Toolbarbutton - content with text-overflow: ellipsis

andij62
313 1 7

Hi all,

I would like to set the content to "text-overflow: ellipsis", if the link is too long. This only works if I set the width to a fixed value, like "width: 200px". But I want to use "width: 100%" so that it works responsive. What do I have to do to make it work? Here my css ...

 .z-toolbarbutton-content {   overflow: hidden;   text-overflow: ellipsis;   -o-text-overflow: ellipsis;   white-space: nowrap;   width: 100%; } 

Regards Andi

delete retag edit

Sort by » oldest newest most voted

cor3000
5833 2 7

Here my interpretation of what you described (and maybe didn't): https://zkfiddle.org/sample/263nviu/2-toolbar-buttons-with-ellipsis

If you want to use 100% you'll have to specify a width around the element using 100%. In the example above the width is determined by flex-box. The content already has 100% so it's not needed to specify again.

What it also does is: it renders toolbar buttons normally (full length) as long as they fit into a row. If they don't fit any more it will start shortening the longest buttons first. So that shorter buttons remain unaffected by the shrinking, until necessary. This is achieved by max-width: min-content. Basically the flex box would like to assign the same width to every button, but due to the max-width some are already shorter so the don't need to flex.

Thank you! Exactly what I was looking for

( 2021-03-23 17:25:12 +0800 )edit

great to hear... have a good day

( 2021-03-24 10:55:29 +0800 )edit
[hide preview]