Toolbarbutton - content with text-overflow: ellipsis

asked 2021-03-19 23:18:37 +0800

andij62 gravatar image 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 flag offensive retag edit

1 Answer

Sort by » oldest newest most voted

answered 2021-03-22 16:39:08 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

updated 2021-03-22 16:56:39 +0800

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.

link publish delete flag offensive edit


Thank you! Exactly what I was looking for

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

great to hear... have a good day

cor3000 ( 2021-03-24 10:55:29 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2021-03-19 23:18:37 +0800

Seen: 7 times

Last updated: Mar 22

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More