使用空白时网格单元会扩展

Question

我希望网格单元能够容纳尽可能多的文本，直到文本不会换行到第二行。

我正在使用文本省略技术，但在网格中使用时它不起作用。

在下面的 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;
}

Answer 1

我现在能够包裹文本，但它会导致单元格网格扩展

1）不要min-content使用价值grid-template-columns。这会扩展单元格以适应内容的宽度。

2) 禁止文本换行和缩短字符串的属性，适用于<div>，不适用于<span>

这就是你所需要的？

结果

#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>

CodePen上也有相同的代码