空间不足时隐藏网格项目

Question

我有一个包含 4 个项目的网格容器。前 2 个项目和第 4 个项目将始终占用相似的空间，这 3 个项目可长可短，并且必须占据所有剩余空间，如下所示

function handleWidth() {
  const inputValue = document.getElementById("widthInput").value;

  document.getElementsByClassName("grid-container")[0].style["width"] = inputValue + '%';
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}

.grid-container>div {
  padding-right: 10px;
}

<div class="grid-container">
  <div>Jira-123</div>
  <div>Icon</div>
  <div>Summary - This is a summary of jira item</div>
  <div>In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>

但是，如果您减少网格容器适合的可用空间（您可以通过在上面给出的示例中的输入字段中输入一个值，例如 25 来实现），您将看到显示摘要/标题多行。

我想做的事情

随着空间减少，我想删除状态（上例中的“正在进行”）并用省略号显示“摘要/标题”，随着空间进一步减少，我想删除“摘要/标题”以及。第一个网格项，即 JIRA-123 不应换行。

Answer 1

function handleWidth() {
  const inputValue = document.getElementById("widthInput").value;

  document.getElementsByClassName("grid-container")[0].style["width"] = inputValue + '%';
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}

.grid-container>div {
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-weidth: 0;
  outline: 1px solid red;
}

<div class="grid-container">
  <div>Jira-123</div>
  <div>Icon</div>
  <div>Summary - This is a summary of jira item</div>
  <div>In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>