3 replies

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:

h2 {
  text-align: center;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

h2 {
  text-align: center;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

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
height
until the image width is less than the header width.)

KP-C

Kevin Powell - Community•6mo ago•

3 replies

dys 🐙

How to truncate an element's title based on the contents' width?

h2 {
  text-align: center;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

h2 {
  text-align: center;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

How to truncate an element's title based on the contents' width?

Similar Threads

How to truncate an element's title based on the contents' width?

Similar Threads

Similar Threads

Similar Threads