DEV Community

Luca Uliana
Luca Uliana

Posted on • Updated on

Grid cell issue with white-space: nowrap & text-overflow: ellipsis

N.B.: I solved with min-width: 0 applied on each .grid__item, like in flexbox world.

Anyone can help me with this css grid stuff?

I have a complicated HTML structure:

<div class="grid">
  <div class="grid__item">
    <div>
        <a href="#">
            <div class="grid__detail">
              <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit.....very long title</h2>
            </div>
        </a>
    </div>
  </div>
  [...]
</div>
Enter fullscreen mode Exit fullscreen mode

And I'm using CSS grids:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

I need a box-shadow on a inner div:

.grid__item div {
    box-shadow: 0 0 10px red;
}
Enter fullscreen mode Exit fullscreen mode

with a long text title, I need the text-overflow prop to truncate it:

.grid__item h2 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

For some weird reasons the cells grow up, until to contain the whole text, and so, my grid breaks down. overflow: hidden on my grid cell solves the issue, but I can't use box-shadows on the inner div.

.grid__item {
    // overflow: hidden; // this fixes the problem, but say goodbye to the inner box-shadow
        min-width: 0; // this fixes the problem with truncate text
}
Enter fullscreen mode Exit fullscreen mode

Any ideas? :(

Top comments (13)

Collapse
 
timhecker profile image
Luca Uliana

I solved with min-width: 0 applied on each .grid__item, like in flexbox world ;)

Collapse
 
reenan profile image
Renan Souza

Thank you for putting this here. Helped me with the same issue today.

Collapse
 
mateus_vahl profile image
Mateus Vahl

Thanks

Collapse
 
cplepage profile image
CP Lepage • Edited

Wow thanks!! Makes sense

Collapse
 
admtech profile image
Admtech

You can also solve it by following instructions:
grid-template-columns: repeat(4, minmax(0, 1fr));

Is similar to the "min-width: 0" but more elegant :-)

greeting
frank

Collapse
 
timothy profile image
Timothy

Brilliant! Fixed it for me đź‘Ť

Collapse
 
renannobile profile image
Renan Lourençoni Nobile

I played a little with your code, is this what you need?

Collapse
 
timhecker profile image
Luca Uliana

Mmh, i'm in a responsive environment, I can't use absolute widths, like 300px.

Collapse
 
renannobile profile image
Renan Lourençoni Nobile

What if you change 300px to 100vw?

Thread Thread
 
timhecker profile image
Luca Uliana

This works, but it's not a solution for me :( you changed the repeat() function with auto-fill, but I need 4 cols. For the moment I solved using flex instead of grid.

Collapse
 
alephnaught2tog profile image
Max Cerrina

So to clarify--you want those three paragraphs in a row, with the box shadow under each one, and for the title to be truncated instead of wrap, correct?

Collapse
 
timhecker profile image
Luca Uliana

Yep, more or less

Some comments may only be visible to logged-in visitors. Sign in to view all comments.