CODEWITHSUNDEEP
htmlcsscss-grid
peterc
peterc

Reputation: 7863

How to prevent CSS Grid blowout so that text-overflow ellipsis will work

I am having some issues with CSS Grid "blow out" which is causing my text property text-overflow: ellipsis to not work.

I have seen many posts on this, and tried many things, but just don't understand what I have wrong. I can reproduce in a simple example.

In my case, I am using a third part component, where I want to put my UI inside one of it's elements.

For example, below the element third-party-container is the third part component, and my UI is contained in my-containerm where I wish to completely fill the third-party-container

HTML

<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>

CSS

    #third-party-container {
        height: 40px;
        width: 140px;
        background: orange;
    }

    #my-container {
        background: yellow;
        height: 100%;
        width: 100%;
        display:grid;
        align-items: center;
        justify-items: left;
        grid-template-columns: min-content 13px minmax(0, 1fr);
        grid-template-rows: 1fr;
        column-gap: 2px;
        white-space: nowrap;            
    }

    #s1 {
        background: red;  
         grid-row: 1;
         justify-items: left;
         grid-column: 1;          
         align-items: stretch;   
    }

    #s2{
        background: green;
        grid-row: 1;   
        overflow: hidden;               
        grid-column: 2;   
    }

    #s3 {  
        background: pink;
        grid-row: 1;      
        justify-items: left;
        display: grid;
        align-items: center;
        grid-column: 3;                                         
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;   
    }

Also available at this Plunkr

So in my-container I have a single row, and 3 columns. The first two columns have quite small widths. The first columns may vary slightly, but will always be quite small. The 2nd is just fixed.

The third column s3 (coloured pink) is the one that may sometimes have longer text than can fit in the containers. However, this is what I see in the above example...

enter image description here

When I look at this in dev tools, I can see the s3 is "blowing out", ie not being contained within its container.

enter image description here

I had got around this before by using the minmax(0, 1fr) but it is not working here.

The outer container has a fixed width, and my-container is 100% of this.

What am I doing wrong and how I can get this to work?

Upvotes: 3

Views: 4990

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

The issue is the use of display:grid on #s3. Remove it and also add width:100%

#third-party-container {
  height: 40px;
  width: 140px;
  background: orange;
}

#my-container {
  background: yellow;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: left;
  grid-template-columns: min-content 13px minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: 2px;
  white-space: nowrap;
}

#s1 {
  background: red;
}

#s2 {
  background: green;
  overflow: hidden;
}

#s3 {
  background: pink;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
}
<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>

Upvotes: 4

Related Questions