CODEWITHSUNDEEP
htmlcsscss-grid
Mike
Mike

Reputation: 333

How to ellipsis content in grid layout auto-width container cell?

There is a div with grid layout and fixed width.

One of its children is a container and has auto width through template.

Inside the container, here is the content I would like to make ellipsis.

It seems the container's width is incorrect, it does not equal to 300px - 30px - 50px. How can I change this?

div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
}

.ellipsis-content {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.right {
  grid-column-start: 3;
}
<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

Upvotes: 0

Views: 1002

Answers (2)

Richard
Richard

Reputation: 7433

Adding an overflow to the container works.

Question

However, your question is more directed towards why doesn't the value of auto in my container resolve to 300px-30px-50px? It should have been 220px, but why is it extending to 600px+?

Answer

This happens because of white-space: nowrap. The text is unable to wrap, causing it to extend its width to a very long value. However, why does the container also extend when its child extends? Shouldn't auto have resolved to 220px even when its child extends more than that value? It is because in this case, auto is identical to the value max-content. This means that the auto value will resolve to max-content. max-content will then resolve to the largest max-content contribution value of that specific column. What is max-content contribution then? It is width value of the "children" of the column which causes the max-content size of the container to change (in this case, the container is column). max-content itself refers to minimum size that is allowed, but still fitting all the content inside without overflowing. Your nowrap text is very long and its max-content size is 600px+. This is why the container resolves to 600px+ too (because auto resolves to the largest max-content contribution).

div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}

.ellipsis-content {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.right {
  grid-column-start: 3;
}
<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

Upvotes: 1

kiranvj
kiranvj

Reputation: 34117

Add overflow to container .ellipsis-container also.

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}


div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}

.ellipsis-content {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.right {
  grid-column-start: 3;
}
<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

Upvotes: 2

Related Questions