CODEWITHSUNDEEP
htmlcss
Sprotty
Sprotty

Reputation: 5973

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

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

enter image description here

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

enter image description here

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!

Upvotes: 1

Views: 1825

Answers (2)

Temani Afif
Temani Afif

Reputation: 272772

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>

Upvotes: 2

Matt Croak
Matt Croak

Reputation: 2888

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>

Upvotes: 1

Related Questions