CSS div auto size to contents, with max width and elipsis text

Question

I'm trying to stlye something like this, so the container's width auto sizes given the longest text on each row.

But I want a max-width on the container, and if thats exceeded then I want an elipsis to show on the truncated text.

Each row has its own indent, and I want the mouse over to operate on the whole row.

I've had a crack at this, but it's just not working for me...

https://jsfiddle.net/sprotty/wfdkeq1L/18/

 .component-body-inputs { max-width: 500px; width:fit-content(); /* doesn't seem to do anything*/ background-color: yellow; white-space: nowrap; } .component-body-inputs>div { overflow: hidden; border-top: solid 1px black; } .component-body-inputs>div>img { width: 1em; height: 1em; } .component-body-inputs>div>div { display: inline-block; text-overflow: ellipsis; /* doesn't seem to do anything*/ } .component-body-inputs>div:hover { background-color: lightgray; }

 <div class="component-body-inputs"> <div> <img style="padding-left:0em" src="Icon.png" /> <div>Item1</div> </div> <div> <img style="padding-left:1em" src="Ico.pngn" /> <div>Item1</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1hshksdh fh sdfjhsjkdfhs fsd</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1</div> </div> </div>

(Note the html and css can be completely changed, I just need an element which represents the row to hang events on).

CSS is not really my thing, so please explain things with that in mind!

Answer 1

fit-content() need to be used with value ( https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content ). Without it's invalid.

By the way you don't need it and you can update your code like below. I will rely on flexbox to make it easier since you want to have all the elements in the same row next to each other.

 .component-body-inputs { max-width: 200px; display:inline-block; /* to fit the content width OR display:table to keep the block level behavior */ background-color: yellow; white-space: nowrap; } .component-body-inputs>div { /*overflow: hidden; not needed here*/ border-top: solid 1px black; display:flex; /* added this */ } .component-body-inputs>div>img { width: 1em; height: 1em; } .component-body-inputs>div>div { /*display: inline-block; not needed*/ text-overflow: ellipsis; overflow: hidden; /*needed here*/ } .component-body-inputs>div:hover { background-color: lightgray; }

 <div class="component-body-inputs"> <div> <img style="padding-left:0em" src="Icon.png" /> <div>Item1</div> </div> <div> <img style="padding-left:1em" src="Ico.pngn" /> <div>Item1</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1hshksdh fh sdfjhsjkdfhs fsd</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1</div> </div> </div>

Answer 2

You need to add overflow: hidden; to .component-body-inputs>div>div otherwise it won't work. You should also get rid of display: inline-flex and instead put display: flex; on the parent ( .component-body-inputs>div ) which will make the children appear inline with respect to each other.

 .component-body-inputs { max-width: 200px; background-color: yellow; } .component-body-inputs>div { overflow: hidden; border-top: solid 1px black; white-space: nowrap; display:flex; } .component-body-inputs>div>img { width: 1em; height: 1em; } .component-body-inputs>div>div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* doesn't seem to do anything*/ } .component-body-inputs>div:hover { background-color: lightgray; }

 <div class="component-body-inputs"> <div> <img style="padding-left:0em" src="Icon.png" /> <div>Item1</div> </div> <div> <img style="padding-left:1em" src="Ico.pngn" /> <div>Item1</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1hshkbnjmbn,sd hjmflkj;jlk;jkl;klhg</div> </div> <div> <img style="padding-left:2em" src="icon.png" /> <div>Item1</div> </div> </div>