Grid cell is expanding when using white-space

Question

I want the grid cell to fit as much text as possible until the text would not wrap on a second line.

I'm using the text ellipsis technique but it does not work when used in a grid.

In the codepen link below i was able to nowrap the text but it causes the cell grid to expand. Any idea why?

Additional I would to avoid any space between each column, that's why i want to avoid fix sizes.

Codepen: https://codepen.io/gregorym/pen/oNvVzqB?&editable=true

<div id="container">
  <div>
    <span>Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. </span>
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
  </div>
  <div>
    Inflexible item of 150 pixels width.
  </div>
</div>

#container {
  display: grid;
  grid-template-columns: minmax(min-content, auto) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

#container > div > span {
  color: red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

See this post for some general requirements for using ellipsis: https://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Sep 25 '19 at 16:55

score 5 · Accepted Answer · answered Sep 25 '19 at 06:43

i was able to nowrap the text but it causes the cell grid to expand

1) Don't use min-content in grid-template-columns value. This expands the cell to fit the width of the content.

2) Properties that prohibit text wrapping and shorten the string, apply to <div>, not <span>

This is what you need?

Result

#container {
  display: grid;
  grid-template-columns: minmax(auto, 300px) minmax(200px, 1fr) 150px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container div:nth-child(odd) {
  background: #EEE;
}

#container>div {
  background-color: #8ca0ff;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#container>div>span {
  color: red;
  /*   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax -->

<div id="container">
  <div>
    <span>Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. </span>
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
  </div>
  <div>
    Inflexible item of 150 pixels width.
  </div>
</div>

And same code on CodePen

Grid cell is expanding when using white-space

1 Answers1

Result