Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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.
Asked: 2021-03-19 23:18:37 +0800
Seen: 9 times
Last updated: Mar 22 '21
