How to truncate an element's title based on the contents' width?
I am working on a collaborative file system and am attempting to base part of the UI roughly on the Nautilus file manager from Gnome on Linux.
I've only got bare bones functioning at the moment, but I'm having difficulty when the file name is long, and I would like to truncate it.
I've got the style:
But, the header is just pushing the width of the containing element wider, and I get no ellipsis. I am displaying arbitrary images, and would like to have the width be based on the image properties rather than setting it statically in CSS.
Is there a way that I can make the width of the container be whatever the width of the contained image is? Here's my testbed Codepen. (Just use the range slider to drop the
I've only got bare bones functioning at the moment, but I'm having difficulty when the file name is long, and I would like to truncate it.
I've got the style:
But, the header is just pushing the width of the containing element wider, and I get no ellipsis. I am displaying arbitrary images, and would like to have the width be based on the image properties rather than setting it statically in CSS.
Is there a way that I can make the width of the container be whatever the width of the contained image is? Here's my testbed Codepen. (Just use the range slider to drop the
height
