css - 使用空白时网格单元正在扩展

Question

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

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

在下面的 codepen 链接中，我能够对文本进行 nowrap，但它会导致单元格网格扩展。知道为什么吗？

另外我会避免每列之间有任何空格，这就是为什么我想避免固定大小。

代码笔: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

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

1) 不要使用 min-content在 grid-template-columns值(value)。这会扩展单元格以适合内容的宽度。

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 上的代码相同